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

JavaScript 2019-01-08

标题

功能的

函数来进行一个诠释就是为了多次使用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="https://www.f2er.com/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          }

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支持第三个参数...

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其他强类型语言...

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提交） 2.资源...

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是须知的必须有...

搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图，：视图模...

js实现横向跑马灯效果

首先我们需要一个html代码的框架如下：我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...

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

相关文章