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

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

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

然后在此处  我要为我的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为#  ：

 var as = my$("caca").getElementsByTagName("a"); //首先获取三个图片的a标签  因为要分别为他们设置点击事件

         for (var i = 0;i < as.length;i++){  //利用for循环为每个a注册点击事件

             as[i].onclick = function () {

                 var temp = this.getElementsByTagName("img");  //由于没有设置a的href 我们要获取a里面img的src  但是获取img用的是获取集合的方式  我们明明知道它只有一个但是就是要进行循环

                 for (var i = 0;i < temp.length;i++){//然后把她的src 赋给 下边的显示框的图片的src   整个程序看起来就很复杂  很不简洁 这个方法就放弃掉!

                     my$("test").src = temp[i].src;

                 }

                             }

         }

第二种方法： 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来写的  我不是很懂原理  但是之前写过会这么写

 var as = my$("caca").getElementsByTagName("a");

         for (var i = 0;i < as.length;i++){

             as[i].onclick = function () {

                 my$("test").src = this.children[0].src;

             }

         }

"美女相册"的 js 实现代码的更多相关文章

  1. 网络问卷调查js实现代码

    昨天一个同行妹纸写了一个网络问卷调查的效果,但是有bug,于是就来问我该如何解决这个bug.经过我的分析,bug主要还是出在复选框的那部分,经过修改,bug问题解决,现在贴出如下代码,仅供大家参考: ...

  2. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  3. 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验

    转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...

  4. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  5. SpringMVC学习系列-后记 结合SpringMVC和Hibernate-validator，根据后台验证规则自动生成前台的js验证代码

    在SpringMVC学习系列(6) 之 数据验证中我们已经学习了如何结合Hibernate-validator进行后台的数据合法性验证,但是通常来说后台验证只是第二道保险,为了更好的用户体验会现在前端 ...

  6. 响应式js幻灯片代码一枚

    网站搭建经常会用到js幻灯片轮播,放上几张上档次的美图,为你的爱站增添大气元素.经常看到一些js幻灯片代码,但是感觉不是很美观,有的也不支持自适应缩放,也即是响应式,现在智能手机的普及以及移动浏览器技 ...

  7. ASP.Net MVC4中封装CSS和js冗余代码（不让其大篇的显示在前台上）

    (1)封装CSS和JS代码,使用调用的方式在前台进行调用.是开发看起来简洁和易于管理,可达到重用.   由于asp.netMVC4 框架 ,在封装js和CSS的时候,有如下规范: using Syst ...

  8. 使用正则表达式匹配JS函数代码

    使用正则表达式匹配JS函数代码 String someFunction="init"; Pattern regex = Pattern.compile("function ...

  9. JS倒计时 代码

    JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...

随机推荐

  1. bash编程-执行流程

    1.顺序执行 shell脚本按从上到下的顺序依次执行,除非使用了选择.循环等执行流程. 2.选择执行 2.1 if # 格式一 if 条件; then # 语句 fi # 格式二 if 条件; the ...

  2. JavaScript获取键盘事件

    JavaScript中: onkeydown 事件会在用户按下一个键盘按键时发生. onkeypress 事件会在键盘按键被按下并释放一个键时发生. onkeyup 事件会在键盘按键被松开时发生. 支 ...

  3. H5内联视频

    概述 微信上很多H5页面都会有会动的像视屏的页面,这样的效果很棒.从技术上来说,这个其实就是视屏,不过没有控制播放的按钮罢了.它们还有一个专业的名字--内联视频.下面我把自己对内联视屏的学习记录下来, ...

  4. @RequestParam加不加的区别

    感觉@撸码识途 https://www.cnblogs.com/tinyj/p/9786131.html 加上的情况: @RequestMapping("demo") public ...

  5. webrtc vad小bug

    当channel为5的时候offset为80,再进行下面的操作smallest_values[j + 1]将会越出数组的限界到”第97个“:应该将下图的16改为15 low_value_vector数 ...

  6. Tools - Vim

    Vim 简明 Vim 练级攻略 基础设置 在vim界面点击":"然后进行设置,但只会在当前vim界面生效: 添加相关设置在vim配置文件(例如"/etc/vimrc&qu ...

  7. 常用的评价指标：accuracy、precision、recall、F1-score、ROC-AUC、PR-AUC

  8. OC学习2——C语言特性之函数

    1.OC是在C语言的基础上进行扩展的,在OC中直接用C语言进行coding也是可以通过编译的.因此,函数定义的语法格式如下: 函数返回值类型 函数名(形参列表) { //由零条或多条可执行性语句组成的 ...

  9. web自动化测试---css方式定位页面元素

    css方式定位的方法也有很多,相较于xpath更灵活一点,下面就介绍下使用方法(以百度输入框为例) 1.通过tag来定位,可以写成如下: driver.find_element_by_css_sele ...

  10. Kafka实战－Kafka到Storm

    1.概述 在<Kafka实战-Flume到Kafka>一文中给大家分享了Kafka的数据源生产,今天为大家介绍如何去实时消费Kafka中的数据.这里使用实时计算的模型——Storm.下面是 ...