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

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

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

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

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

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

我来简单举个例子：

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

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

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

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

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

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

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

~~~~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         }

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

相关推荐