"美女相册"的 js 实现代码
标签：
JavaScript
这个所谓的美女相册呢 并不是和你们想的一样龌龊
当然了 好像看起来也很龌龊 但是很多的版面都能用到这个功能的
我来简单举个例子：
在一个网页里 这上面有三个图 如果你点击任意一个 下边的空白处就会展示出那个图的放大版本 话不多说 上图
很多很龌龊的网站就是这种结构 看图片哦 很多人应该看过把哈哈哈哈哈
好了好了 我要说这个具体怎么写 怎么实现的了
我要再说一下 这个呢为什么没放美女图片呢
因为当时这个我是在教室里码出来的哈哈哈哈 周围都是人不好意思
~~~~stop
我直接把html和css 代码粘上 不去讲了因为我主要想总结一下 关于js的部分
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#caca {
margin: 0 auto;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
}
#caca img {
width: 200px;
height: 200px;
vertical-align: middle;
}
#caca ul {
margin: 0 auto;
width: 600px;
height: 200px;
}
#caca li {
float: left;
}
li {
list-style-type: none;
}
#caca ul {
width: 600px;
}
#display {
width: 600px;
height: 600px;
margin: 0 auto;
}
#display img {
width: 600px;
height: 600px;
}
</style></head><body>
<div id="caca" >
<ul>
<li><a href="11.jpg"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="11.jpg" alt=""></a></li> //这里可是有讲究的哦 如果不把a的href设置成和图片一样 那么你操作起来会很麻烦 可能是我学的还不够厉害
<li><a href="1.jpg"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg" alt=""></a></li> //我就以我的理解告诉你们 不要笑话我哦哈哈 在下面我先给你们看我如果不设置a的href是怎么实现的
<li><a href="pic1.png"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="pic1.png" alt=""></a></li>
</ul>
</div>
<div id="display">
<img id="test" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="" alt="">
</div>
</body>
</html>
其实这个难度不高 但是有个点我感觉很好
第一种方法： a中不设置href 设置a的href为# ：
1 var as = my$("caca").getElementsByTagName("a"); //首先获取三个图片的a标签 因为要分别为他们设置点击事件 2 for (var i = 0;i < as.length;i++){ //利用for循环为每个a注册点击事件 3 as[i].onclick = function () { 4 var temp = this.getElementsByTagName("img"); //由于没有设置a的href 我们要获取a里面img的src 但是获取img用的是获取集合的方式 我们明明知道它只有一个但是就是要进行循环 5 for (var i = 0;i < temp.length;i++){//然后把她的src 赋给 下边的显示框的图片的src 整个程序看起来就很复杂 很不简洁 这个方法就放弃掉! 6 my$("test").src = temp[i].src; 7 } 8 10 }11 }
第二种方法： a种设置href 等于 a种img的src
| 1234567 | var as = my$("caca").getElementsByTagName("a"); //首先获取三个图片的a标签 为他们设置点击事件 for (var i = 0;i < as.length;i++){ 利用for循环为每个a注册点击事件 as[i].onclick = function () { my$("test").src = this.href; // 由于设置了 href 就不需要再获取a种的img了 直接赋值就很方便 return false; //这一行是这个方法的灵魂所在 } } |
划重点！！！！
一 ！如果我们没有为一个a标签注册事件 那么它的默认事件就是跳转到href种的网址
如果我们为a标签注册了一个处理函数 （事件），那么他会先执行处理函数 再执行默认的事件
但是呢如果我们不想再让他继续进行默认的事件 我们就可以利用 return false 来阻止默认事件的发生！
我刚刚又尝试了第三种写法 也是可以实现的 第三种好像更方便 我贴出来给大家看 用的是children来写的 我不是很懂原理 但是之前写过会这么写
1 var as = my$("caca").getElementsByTagName("a");2 for (var i = 0;i < as.length;i++){3 as[i].onclick = function () {4 my$("test").src = this.children[0].src;5 }6 }
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦