公司有个技术很牛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属性。