公司有个技术很牛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属性。
时间： 2024-10-06 08:41:42