频道导航

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

2019-01-08 JavaScript Lzxgg

前端之家收集整理的这篇文章主要介绍了"美女相册"的 js 实现代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

标题

功能的

函数来进行一个诠释就是为了多次使用getElementById带来的麻烦封装成了一个函数

<div id="comment_body_4157866" class="blog_comment_body"><span style="color: #ff0000">function my$(id) {<span style="color: #ff0000">return document.getElementById(id);<span style="color: #ff0000">}

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

图片哦很多人应该看过把哈哈哈哈哈

图片呢

~~~~stop

我直接把html和css 代码粘上不去讲了因为我主要想总结一下关于js的部分

Meta Title

    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;
    li </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        list-style-type</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; none</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;
    #caca ul </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;

        width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 600px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;
    #display </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 600px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 600px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        margin</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0 auto</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;
    #display img </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 600px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 600px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span>

<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;style</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;id</span><span style="color: #0000ff"&gt;="caca"</span> <span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;ul</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;a </span><span style="color: #ff0000"&gt;href</span><span style="color: #0000ff"&gt;="11.jpg"</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;img </span><span style="color: #ff0000"&gt;src</span><span style="color: #0000ff"&gt;="11.jpg"</span><span style="color: #ff0000"&gt; alt</span><span style="color: #0000ff"&gt;=""</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;a</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;>   //这里可是有讲究的哦   如果不把a的href设置成和<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>一样 那么你操作起来会很麻烦  可能是我学的还不够厉害</span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;a </span><span style="color: #ff0000"&gt;href</span><span style="color: #0000ff"&gt;="1.jpg"</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;img </span><span style="color: #ff0000"&gt;src</span><span style="color: #0000ff"&gt;="1.jpg"</span><span style="color: #ff0000"&gt; alt</span><span style="color: #0000ff"&gt;=""</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;a</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;>   //我就以我的理解告诉你们  不要笑话我哦哈哈  在下面我先给你们看我如果不设置a的href是怎么实现的</span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;a </span><span style="color: #ff0000"&gt;href</span><span style="color: #0000ff"&gt;="pic1.png"</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;img </span><span style="color: #ff0000"&gt;src</span><span style="color: #0000ff"&gt;="pic1.png"</span><span style="color: #ff0000"&gt; alt</span><span style="color: #0000ff"&gt;=""</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;a</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;li</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;ul</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;id</span><span style="color: #0000ff"&gt;="display"</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;img </span><span style="color: #ff0000"&gt;id</span><span style="color: #0000ff"&gt;="test"</span><span style="color: #ff0000"&gt; src</span><span style="color: #0000ff"&gt;=""</span><span style="color: #ff0000"&gt; alt</span><span style="color: #0000ff"&gt;=""</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></body></html></span></pre>

其实这个难度不高但是有个点我感觉很好

第一种方法： a中不设置href 设置a的href为# ：

as = my$("caca").getElementsByTagName("a"获取三个图片的a标签因为要分别为他们设置点击事件 ( i = 0;i < as.length;i++注册点击事件 as[i].onclick = temp = .getElementsByTagName("img"获取a里面img的src 但是获取img用的是获取集合的方式我们明明知道它只有一个但是就是要进行循环 ( i = 0;i < temp.length;i++显示框的图片的src 整个程序看起来就很复杂很不简洁这个方法就! my$("test").src = }

第二种方法： a种设置href 等于 a种img的src

Highlighter">

获取三个图片的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;   //这一行是这个方法的灵魂所在
            }
        }

标签注册事件那么它的默认事件就是跳转到href种的网址

标签注册了一个处理函数（事件），那么他会先执行处理函数再执行默认的事件

  as = my$("caca").getElementsByTagName("a"          ( i = 0;i < as.length;i++             as[i].onclick =                  my$("test").src = .children[0          }