为了账号安全,请及时绑定邮箱和手机立即绑定

"美女相册"的 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

?

1234567var 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         }

原文出处:https://www.cnblogs.com/Lzxgg-xl/p/10235721.html  

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消