<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>多滑动效果展示</title>
<link rel="stylesheet" href="style/reset.css" />
<link rel="stylesheet" href="style/Qc.css" />
<link rel="stylesheet" href="style/Qe.css" />
<script src="script/Qe.js"></script>
</head>
<body>
<div id="Qe">
<img src="tupianku/1.jpg" alt="钰" title="Admin"/>
<img src="tupianku/2.jpg" alt="楽" title="Nckop"/>
<img src="tupianku/3.jpg" alt="懦" title="Galse"/>
<img src="tupianku/4.jpg" alt="末" title="Sole"/>
<img src="tupianku/5.jpg" alt="末" title="Sole"/>
</div>
<div id="Qc">
<img src="tupianku/6.jpg" alt="钰" title="Admin"/>
<img src="tupianku/7.jpg" alt="楽" title="Nckop"/>
<img src="tupianku/8.jpg" alt="懦" title="Galse"/>
<img src="tupianku/9.jpg" alt="末" title="Sole"/>
<img src="tupianku/10.jpg" alt="末" title="Sole"/>
</div>
<script src="script/Qc.js"></script>
</body>
</html>
只能同时存在一组图片滑动效果的图片，另一组被堆积。
js代码只有一组被运行，css效果产生的堆积发生了作用，js在另一组代码没有发生作用
js代码：
window.onload=function(){
//容器对象
var Qe=document.getElementById('Qe');
//获得图片 Nodelist对象集合
var imgs=Qe.getElementsByTagName('img');
//单张图片的宽度
var imgwidth=imgs[0].offsetWidth;//javascript 中 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变
//设置掩藏门体露出的宽度
var exposewidth=60;
//设置容器的总宽度
var boxwidth=imgwidth+(imgs.length-1)*exposewidth;
Qe.style.width=boxwidth+'px';
//设置每道门的初始位置
function setimg(){
for(var i=1,len=imgs.length;i<len;i++){
imgs[i].style.left=imgwidth+exposewidth*(i-1)+'px';
}
}
setimg();
//计算每道门打开时应移动的距离
var tran=imgwidth-exposewidth;
//为每道门绑定事件
for(var i=0,len=imgs.length;i<len;i++){
//使用立即调用函数表达式，为了获得不同的i值
(function(i){
imgs[i].onmouseover=function(){//onmouseover 事件会在鼠标指针移动到指定的对象上时发生。
//先将每道门复位。
setimg();
//打开门
for(var j=1;j<=i;j++){
imgs[j].style.left=parseInt(imgs[j].style.left,10)-tran+'px';
}
}
})(i)
}
}
慕数据5775487
相关分类