划重点拉！ 先来解释一下子标题
这个所谓的美女相册呢 并不是和你们想的一样龌龊
当然了 好像看起来也很龌龊 但是很多的版面都能用到这个功能的
然后在此处 我要为我的my$函数来进行一个诠释 就是为了多次使用getElementById带来的麻烦封装成了一个函数
function my$(id) {
return document.getElementById(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;
}
}