标签：
公司有个技术很牛x的“老腊肉”，我向他请教，他给了我个网址，上面蛮多效果的，于是乎~我决定照着效果看能不能自己敲出来，我要变大神X3，重要的事说3遍。
它完成的效果是这样的：
好吧，一步一步来，先把框架搭好
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ padding: 5em; } .frame{ margin:0 auto; width: 968px; } .preview{ width: 786px; height: 442px; float: left; } .list{ float: right; width: 173px; } .list ul{ margin:0; padding:0; list-style:none; overflow: hidden; } .list ul li{ margin-bottom:9px; cursor: pointer; position: relative; } .list ul li>img{ display: block; } .list ul li:after{ background: rgba(0,0,0,.6); content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: background 0.2s linear; } .list ul li.active:after{ background: rgba(255,255,255,0); box-sizing: border-box; opacity: 1; border:4px solid #fff; transition: none; } .list ul li:hover:after{ background: rgba(255,255,255,0); } </style> </head> <body> <div class="frame"> <div class="preview" id="preview"> <img src="wp_b0.jpg"> </div> <div class="list" id="list"> <ul> <li class="active"> <img src="wp_t0.jpg"> </li> <li> <img src="wp_t1.jpg"> </li> <li> <img src="wp_t2.jpg"> </li> <li> <img src="wp_t3.jpg"> </li> </ul> </div> </div> </body> </html>
上面的代码仅仅完成了静态显示效果，鼠标移上去有个背景由暗变亮的过渡效果，但是还不能切换图片，接下来我们把这部分完成：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function(){ var links=document.getElementById("list").getElementsByTagName("li"); for(var i=0;i<links.length;i++){ links[i].onclick=function(){ var preview=document.getElementById("preview"); var previewImg=preview.getElementsByTagName("img")[0]; // var pre_src=previewImg.getAttribute("src"); // console.log(pre_src); var links_src=this.getElementsByTagName("img")[0].getAttribute("src"); // console.log(links_src); var t=links_src.substr(4,1); // var b=pre_src.substr(4,1); // console.log(b); //b=0 // console.log(t);//t=3 var pre_src="wp_b"+t+".jpg"; // console.log(pre_src); previewImg.setAttribute("src",pre_src); } } } </script> </head> <body> </body> </html>
为了方便查看，我把这部分功能以外的html代码和css样式部分全部删掉了。注释部分是方便测试用的。代码还是比较简单的，现在我们的图片可以切换了。
注意，此时还有最后一个功能，即鼠标点击右侧导航小图，所点导航增加一个“active”类，其他兄弟导航不允许存在此类。如果用jq写，很简单，
$(document).ready(function() {
$("div ul li").click(function(){
$(this).addClass("add").siblings().removeClass("add");
});
});
这样就可以，但这里我们用js写，则麻烦的多
之前的增改了一下
window.onload=function(){ var links=document.getElementById("list").getElementsByTagName("li"); for(var i=0;i<links.length;i++){ links[i].onclick=function(e){ var preview=document.getElementById("preview"); var previewImg=preview.getElementsByTagName("img")[0]; var links_src=this.getElementsByTagName("img")[0].getAttribute("src"); var t=links_src.substr(4,1); var pre_src="wp_b"+t+".jpg"; previewImg.setAttribute("src",pre_src);
//下面是激活项 e=e||window.event; var target=e.srcElement||e.target; for(var i=0,len=links.length;i<len;i++){ links[i].className=target==links[i]?"active":""; } } } }
其中还用到了传参。参数e主要为了监听，获取鼠标的状态;
e = e || window.event是js在事件处理兼容IE和非IE的写法;
e.srcElement是为了下面获取触发事件的className属性。
标签：
原文地址：http://www.cnblogs.com/chentongtong/p/5190978.html
