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

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

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

然后在此处  我要为我的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. 迁移桌面程序到MS Store（5）——.NET Standard

    接下来的几篇,我想讨论下迁移桌面程序到MS Store,可以采用的比较常见.通用性比较强的实施步骤和分层架构. 通常商业项目一般都是不断的迭代,不太可能突然停止更新现有的桌面版本,然后花很长时间从头来 ...

  2. 2019-4-22 jdbc学习笔记

    jdbc 一.定义:java database connector 二.常用的接口 java.sql.Driver  驱动 java.sql.Connection  链接 java.sql.State ...

  3. 写一个shell 快速启动停止你的微服务吧

    在这个微服务盛行的时代,docker获得了巨大的成功,因为我们需要在一台服务器装上N个服务. 本文不是想讨论如何使用docker,而是,在一台服务器安装了多个服务后,怎样启动方便的启动服务呢? 一.在 ...

  4. requsets模块的学习

    requests模块的学习 使用之前 pip install requests 发起get,post,请求获取响应 response = requests.get(url,headers) # 发起g ...

  5. docker，docker-compose部署服务器

    搭建服务器 docker 是一种容器技术,作用是用来快速部署服务,docker-compose 是用来做docker 的多容器控制. 简单的来说:docker-compose即为一种自动化部署服务. ...

  6. webrtc vad小bug

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

  7. 天了噜，Java 8 要停止维护了！

    前些天的中兴事件,已经让国人意识到自己核心技术的不足,这次的 JDK 8 对企业停止免费更新更是雪上加霜.. 以下是 Oracle 官网提示的 JDK8 终止更新公告. 原文内容:Oracle wil ...

  8. iOS-Xcode解决【workspace integrity couldn't load project'】

    出现如标题提示的项目打不开情况,多半可能是因为Xcode版本不同,或者是SVN/Git使用导致 解决办法一: 删除冲突代码,"项目文件->Pod文件夹->Pods.xcodepr ...

  9. Python内置类型(1)——真值测试

    python中任何对象都能直接进行真假值的测试,用于if或者while语句的条件判断,也可以做为布尔逻辑运算符的操作数 python中任何对象都能直接进行真假值的测试,而不需要额外的类型转换 这一点是 ...

  10. vertical-align_CSS参考手册_web前端开发参考手册系列

    该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值.这会使元素降低而不是升高.在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式. <!DOCTYP ...