用原生js实现一个美女相册小案例

注意案例中使用的图片需要自己替换成本地文件；

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">body {font-family: "Helvetica", "Arial", serif;color: #333;background-color: #ccc;margin: 1em 10%;}h1 {color: #333;background-color: transparent;}a {color: #c60;background-color: transparent;font-weight: bold;text-decoration: none;}ul {padding: 0;}li {float: left;padding: 1em;list-style: none;}#imagegallery {list-style: none;}#imagegallery li {margin: 0px 20px 20px 0px;padding: 0px;display: inline;}#imagegallery li a img {border: 0;}</style>
</head>
<body><h2>美女画廊
</h2><ul id="imagegallery"><li><a href="images/1.jpg" title="美女A"><img src="data:images/1-small.jpg" width="100" alt="美女1"/></a></li><li><a href="images/2.jpg" title="美女B"><img src="data:images/2-small.jpg" width="100" alt="美女2"/></a></li><li><a href="images/3.jpg" title="美女C"><img src="data:images/3-small.jpg" width="100" alt="美女3"/></a></li><li><a href="images/4.jpg" title="美女D"><img src="data:images/4-small.jpg" width="100" alt="美女4"/></a></li><li><a href="images/1.jpg" title="美女A"><img src="data:images/1-small.jpg" width="100" alt="美女1"/></a></li><li><a href="images/2.jpg" title="美女B"><img src="data:images/2-small.jpg" width="100" alt="美女2"/></a></li>
</ul><div style="clear:both"></div>
<!--显示大图的-->
<img id="image" src="data:images/placeholder.png" alt="" width="700"/>
<!-- 显示文字信息的 -->
<p id="des">选择一个图片</p><script>// 自定义函数调用
function my$(id) {return document.getElementById(id);
}//点击a标签,把a标签中的href的属性值给id为image的src属性//把a的title属性的值给id为des的p标签赋值//从ul中标签获取获取所有的a标签
var imgobj = document.getElementById("imagegallery").getElementsByTagName("a");//循环遍历所有的a标签
for(var i=0;i<imgobj.length;i++){//为每个a标签注册点击事件imgobj[i].onclick = function() {//为id为image的标签的src赋值my$("image").src = this.href;//为p标签赋值    my$("des").innerText = this.title;//阻止超链接默认的跳转return false;};
}
</script></body>
</html>

用原生js实现一个美女相册小案例相关推荐

前端每日实战：164# 视频演示如何用原生 JS 创作一个数独训练小游戏（内含 4 个视频）...
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mQYobz 可交互视频此视频是可 ...
原生JS实现一个简单的打字小游戏
原生JS实现一个简单的打字小游戏利用javascript制作一个简单的打字小游戏之前写了一个贪吃蛇小游戏好像反响不错今天我来写一个比贪吃蛇更low更简单的打字小游戏打字小游戏原理接下来咋们直 ...
打砖块小游戏php程序,利用原生js实现html5打砖块小游戏（代码示例）
本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言 PS:本次项目中使用了大量 es6 语法,故对于 ...
php跳一跳小游戏,原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成 ...
html实现跳跳棋游戏,原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成 ...
原生js实现轮播图——小肉包
使用原生js实现轮播图--小肉包今天分享一个使用原生JS实现轮播图的案例,并且配上比较详细的过程讲解,欢迎小伙伴的浏览和批评指正.静态效果图如下: 核心思想将一些图片在一行中平铺,然后计算偏移量再 ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
原生js完成一个简单的抽奖功能
文章目录前言实现过程 1.前期准备 2.CSS美化 3.使用 js 完成抽奖功能 3.1 随机数模块 3.2 随机奖品 3.3 开始抽奖 3.4 点击开始抽奖完整代码 HTML部分 CSS部分 ...
前端CSS3实现3D相册小案例
前端CSS3实现3D相册小案例 HTML代码部分: <!DOCTYPE html> <html lang="en"> <head> <me ...

用原生js实现一个美女相册小案例

用原生js实现一个美女相册小案例相关推荐

最新文章

热门文章