"美女相册"的 js 实现代码

划重点拉！  先来解释一下子标题

这个所谓的美女相册呢  并不是和你们想的一样龌龊

当然了 好像看起来也很龌龊 但是很多的版面都能用到这个功能的

 

然后在此处  我要为我的my$函数来进行一个诠释 就是为了多次使用getElementById带来的麻烦封装成了一个函数

 

function my$(id) {
return document.getElementById(id);
}

 

我来简单举个例子：

在一个网页里  这上面有三个图  如果你点击任意一个  下边的空白处就会展示出那个图的放大版本 话不多说 上图

很多很龌龊的网站就是这种结构 看图片哦  很多人应该看过把哈哈哈哈哈

好了好了  我要说这个具体怎么写 怎么实现的了

我要再说一下  这个呢为什么没放美女图片呢 

因为当时这个我是在教室里码出来的哈哈哈哈 周围都是人不好意思

~~~~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 src="11.jpg" alt=""></a></li>   //这里可是有讲究的哦   如果不把a的href设置成和图片一样 那么你操作起来会很麻烦  可能是我学的还不够厉害
            <li><a href="1.jpg"><img src="1.jpg" alt=""></a></li>   //我就以我的理解告诉你们  不要笑话我哦哈哈  在下面我先给你们看我如果不设置a的href是怎么实现的
            <li><a href="pic1.png"><img src="pic1.png" alt=""></a></li>
        </ul>
    </div>
    <div id="display">
        <img id="test" src="" 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

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         }

 

posted @ 2019-01-07 21:15  Lzxgg  阅读(985)  评论(4)  编辑  收藏  举报