划重点拉！ 先来解释一下子标题
这个所谓的美女相册呢 并不是和你们想的一样龌龊
当然了 好像看起来也很龌龊 但是很多的版面都能用到这个功能的
然后在此处 我要为我的my$函数来进行一个诠释 就是为了多次使用getElementById带来的麻烦封装成了一个函数
我来简单举个例子：
在一个网页里 这上面有三个图 如果你点击任意一个 下边的空白处就会展示出那个图的放大版本 话不多说 上图
很多很龌龊的网站就是这种结构 看图片哦 很多人应该看过把哈哈哈哈哈
好了好了 我要说这个具体怎么写 怎么实现的了
我要再说一下 这个呢为什么没放美女图片呢
因为当时这个我是在教室里码出来的哈哈哈哈 周围都是人不好意思
~~~~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为# ：
1 var as = my$("caca").getElementsByTagName("a"); //首先获取三个图片的a标签 因为要分别为他们设置点击事件 2 for (var i = 0;i < as.length;i++){ //利用for循环为每个a注册点击事件 3 as[i].onclick = function () { 4 var temp = this.getElementsByTagName("img"); //由于没有设置a的href 我们要获取a里面img的src 但是获取img用的是获取集合的方式 我们明明知道它只有一个但是就是要进行循环 5 for (var i = 0;i < temp.length;i++){//然后把她的src 赋给 下边的显示框的图片的src 整个程序看起来就很复杂 很不简洁 这个方法就放弃掉! 6 my$("test").src = temp[i].src; 7 } 8 10 } 11 }
第二种方法： 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来写的 我不是很懂原理 但是之前写过会这么写
1 var as = my$("caca").getElementsByTagName("a"); 2 for (var i = 0;i < as.length;i++){ 3 as[i].onclick = function () { 4 my$("test").src = this.children[0].src; 5 } 6 }
return document.getElementById(id);
}