window.onload = function() {
//容器对象
var box = document.getElementById("container");
var imgs = box.getElementsByTagName("img");
//单张图片的宽度
var imageWidth = imgs[0].offsetWidth;
//设置掩盖门体露出的宽度
var exposeWidth = 160;
//设置容器总宽度
var boxWidth = imageWidth + exposeWidth * (imgs.length - 1);
box.style.width = boxWidth + "px";
//设置每道门 的初始位置
function setImgsPos() {
for(var i=1,len=imgs.length; i<len; i++) {
imgs[i].style.left = imageWidth + exposeWidth * (i - 1) + "px";
}
}
setImgsPos();
//缓冲
function startMove(obj, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var speed = (iTarget - obj.offsetLeft)/10;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if(obj.offsetLeft == iTarget) {
clearInterval(obj.timer);
} else {
obj.style.left = obj.offsetLeft + speed +"px";
}
} ,30);
}
//计算每道门打开时应移动的距离
var translate = (imageWidth - exposeWidth);
//为每道门邦定事件
for(var i=0,len=imgs.length; i<len; i++) {
//匿名函数获取不同的i值
(function(i) {
// imgs[i].timer = null;
imgs[i].onmouseover = function() {
// setImgsPos();
for(var j=1; j<=i; j++) {
var iTarget = (imageWidth + exposeWidth * (j - 1) - translate);
startMove(imgs[j], iTarget);
//如果想只是单张移动，如下：
// startMove(this, iTarget);
}
}
imgs[i].onmouseout = function() {
// setImgsPos();
for(var j=1; j<=i; j++) {
var iTarget = (imageWidth + exposeWidth * (j - 1));
startMove(imgs[j], iTarget);
//如上，单张：
// startMove(this, iTarget);
}
}
})(i)
}
}我还想为每个滑动门加上 透明效果 就是 mouseover的时候 为不透明 mouseout的时候是覆盖着透明的黑色...我怎么弄都弄不出来
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#container {
margin: 0 auto;
height: 477px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
overflow: hidden;
position: relative;
}
#container .door1 {
filter: alpha(opacity: 100);
opacity: 1;
}
#container img {
position: absolute;
display: block;
left: 0;
border-left: 1px solid #ccc;
filter: alpha(opacity: 30);
opacity: 0.3;
}
</style>window.onload = function() {
//容器对象
var box = document.getElementById("container");
var imgs = box.getElementsByTagName("img");
//单张图片的宽度
var imageWidth = imgs[0].offsetWidth;
//设置掩盖门体露出的宽度
var exposeWidth = 160;
//设置容器总宽度
var boxWidth = imageWidth + exposeWidth * (imgs.length - 1);
box.style.width = boxWidth + "px";
//设置每道门 的初始位置
function setImgsPos() {
for(var i=1,len=imgs.length; i<len; i++) {
imgs[i].style.left = imageWidth + exposeWidth * (i - 1) + "px"; //px别忘了
}
}
setImgsPos();
//透明度
function startOpacity(obj, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var speed = (iTarget - obj.alpha)/10;
speed=speed>0 ? Math.ceil(speed) : Math.floor(speed);
if(obj.alpha == iTarget) {
clearInterval(obj.timer);
} else {
obj.alpha += speed;
obj.style.filter = "alpha(opacity:" + obj.alpha + ")";
obj.style.opacity = obj.alpha/100;
}
} ,30);
}
//计算每道门打开时应移动的距离
var translate = imageWidth - exposeWidth;
//为每道门邦定事件
for(var i=0,len=imgs.length; i<len; i++) {
imgs[0].alpha = 100;
//匿名函数获取不同的i值
(function(i) {
imgs[i].timer = null;
imgs[i].alpha = 30;
imgs[i].onmouseover = function() {
//先复位每道门
setImgsPos();
//打开门
startOpacity(this, 100);
for(var j=1; j<=i; j++) {
imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + "px";
}
}
imgs[i].onmouseout = function() {
setImgsPos();
startOpacity(this, 30);
}
})(i)
}
}为什么不用清除定时器呐？