javascript - 请问如何通过这种方法给多个物体加上链式运动
本文介绍了javascript - 请问如何通过这种方法给多个物体加上链式运动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我知道可以通过给多个物体分别加上不同的ID，然后通过ID来加上事件，那能不能改善我的方法使之可行呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul li{
width: 200px;
height: 100px;
background-color: blue;
list-style-type: none;
margin:20px 0;
cursor: pointer;
filter: alpha(opacity:20);
opacity: 0.2;
border:4px solid #000;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
window.onload=function(){
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].timer=null;
lis[i].alpha=20;
lis[i].onmouseover=function(){
move(lis[i],'opacity',100,function(){
move(lis[i],'width',300);
});
}
lis[i].onmouseout=function(){
move(lis[i],'opacity',20,function(){
move(lis[i],'width',200);
});
}
}
function move(obj,attr,target,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var icur=0;
if(attr=='opacity'){
icur=parseFloat(getStyle(obj,attr))*100;
}
else{
icur=parseInt(getStyle(obj,attr));
}
var speed=(target-icur)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(target==icur){ //检测停止
clearInterval(obj.timer);
if(fn){
fn(); //检测是否有回调函数
}
}else{
if(attr=='opacity'){
obj.style.filter="alpha(opacity:'+(icur+speed)+')";
obj.style.opacity=(icur+speed)/100;
}
else{
obj.style[attr]=icur+speed+'px';
}
}
},30)
}
function getStyle(obj,attr){
if(obj.currentStyle){ //兼容IE
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //兼容火狐
}
}
}
</script>
</body>
</html>解决方案
你这有经典的错误啊，在for循环里面进行事件监听后，用 i 来获取设置对象。。。
for (var i = 0; i < lis.length; i++) {
lis[i].timer = null;
lis[i].alpha = 20;
lis[i].onmouseover = function(ev) {
move(ev.target, 'opacity', 100, function() {
move(ev.target, 'width', 300);
});
}
lis[i].onmouseout = function(ev) {
move(ev.target, 'opacity', 20, function() {
move(ev.target, 'width', 200);
});
}
}这么改后，能跑起来了，你说的链式运动是啥意思？
这篇关于javascript - 请问如何通过这种方法给多个物体加上链式运动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
