var timer = null;
var timer2 = null;
var flag = 0;
window.onload = function(){
var slip = document.getElementById('wrap');
var Blocks = document.getElementById('listpanel').getElementsByTagName('div');
slip.onmouseover = function(){
move(0);
}
slip.onmouseout = function(){
move(-280);
}
for(var i = 0;i < Blocks.length;i++)
{
var id = Blocks[i];
id.onmouseover = function(){
change(id, 0.3, 1);
}
id.onmouseout = function(){
change(id, 1, 0.3);
}
}
}
function change(id, num, alpha){
clearInterval(timer2);
timer2 = setInterval(function(){
if(num == 0.3){
if(id.style.opacity > 0.3) alpha -= 0.1;
}else{
if(id.style.opacity < 1) alpha += 0.1;
}
if(id.style.opacity == num){
clearInterval(timer2);
}
else id.style.opacity = alpha; },100);
}
function move(Target){
var slip = document.getElementById('wrap');
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(slip.offsetLeft > Target) speed = -10;
if(slip.offsetLeft < Target) speed = 10;
if(slip.offsetLeft == Target){
clearInterval(timer);
}else slip.style.left = slip.offsetLeft + speed + 'px';},60);
}
疑问:①绑定事件onmouseout = function(){
change();
}直接使用change()会自动运行
②遍历绑定事件只有最后一个有效