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

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

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

然后在此处  我要为我的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. 第十八节：详解Java抽象类和接口的区别

    前言 对于面向对象编程来说,抽象是它的特征之一. 在Java中,实现抽象的机制分两种,一为抽象类,二为接口. 抽象类为abstract class,接口为Interface. 今天来学习一下Java中 ...

  2. css font-family属性设置中文字体乱码

    一般设置字体,个人都喜欢用中文,比如:font-family:"微软雅黑":但是偶尔会出现设置以后字体显示乱码的问题 解决方法[1]: 看看你的CSS文件的第一行有没有:@char ...

  3. LeetCode: 150_Evaluate Reverse Polish Notation | 分析逆波兰式 | Medium

    题目: Evaluate Reverse Polish Notation Evaluatethe value of an arithmetic expression in Reverse Polish ...

  4. odoo开发笔记 -- 传递上下文实现列表视图按照指定条件过滤显示

    按钮传递上下文: <xpath expr="//div[@name='dec_work_sheet_id']" position="after"> ...

  5. Windows抓屏技术

    Windows桌面共享中一些常见的抓屏技术 1. BitBlt   我想做Windows开发应该都知道这个API, 它能实现DC间的内容拷贝, 如果我们把源DC指定成Monitor DC或是桌面DC, ...

  6. 从零开始学 Web 之 DOM（三）innerText与innerHTML、自定义属性

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  7. 死锁排查的小窍门 --使用jdk自带管理工具jstack

    本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 开发时间久了,难免会写出一些一些死锁的代码,自己明明调用该方法可该方法就是不执行.不进该方法.日志也不打 ...

  8. 读vue-0.6-observer.js源码

    实现监听数组方法 var ArrayProxy = Object.create(Array.prototype), methods = ['push','pop','shift','unshift', ...

  9. MVCC浅析

    在并发读写数据库时,读操作可能会不一致的数据(脏读).为了避免这种情况,需要实现数据库的并发访问控制,最简单的方式就是加锁访问.由于,加锁会将读写操作串行化,所以不会出现不一致的状态.但是,读操作会被 ...

  10. php使用curl模拟GET和POST请求

    GET方式提交数据 function http_get($url, $ssl = FALSE) { $curl = curl_init(); // 启动一个CURL会话 curl_setopt($cu ...