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

时间 2019-11-09

标签相册实现代码栏目 JavaScript 繁體版

原文原文链接

划重点拉！先来解释一会儿标题javascript

这个所谓的美女相册呢并非和大家想的同样龌龊
css

固然了好像看起来也很龌龊可是不少的版面都能用到这个功能的html

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

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

我来简单举个例子：函数

在一个网页里这上面有三个图若是你点击任意一个下边的空白处就会展现出那个图的放大版本话很少说上图网站

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

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

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

由于当时这个我是在教室里码出来的哈哈哈哈周围都是人很差意思htm

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