代码如下，按照视频敲了一遍但是动不了，求同学们帮助
小尼采
2016-03-30 22:07
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
div ul li{
width:200px;height:50px;
background-color:#FF0;
border:1px solid black;
margin-bottom:20px;
opacity:0.3;
filter:alpha(opacity:30);
list-style-type:none;
}
</style>
<script>
window.onload=function(){
var li=document.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
li[i].onmouseover=function(){
//利用json将属性和值两项合在一起
move(this,{width:400,height:100},function(){
move(this,'opacity',1);
});}
/*调用的函数有3个参数，this表示object即当前所选对象，json为所选属性要达到的目标值，fu（）表示链接动作。*/
li[i].onmouseout=function(){
move(this,{width:200,height:50},function(){
move(this,'opacity',0.3);
});}
}
//通过getstyle解决边框BUG，并考虑兼容性
function getStyle(obj,attr){
if(obj.currenStyle){
return obj.currenStyle[attr];
}
else{
return getComputed(obj,false)[attr];
}
}
function move(obj,json,fn){
//立标杆，以确定所有属性都达到目标值
var flag=true;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//第一步取当前值
for(var attr in json){
var iCur=0;
if(attr=='opacity'){
/*如果当前值为透明度（无单位，并且为小数），需要用parseFloat去小数，再用Math.round四舍五入取整来修正BUG*/
iCur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
iCur=parseInt(getStyle(obj,attr));
}
//第二步 求速度
var speed=(json[attr]-iCur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//第三步 运动过程
if(iCur!=json[attr]){
//如果不是所有目前值达到目标值，标签不成立，继续进行运动
flag=false;
}
if(attr=='opacity'){
//透明度无单位px，所以单独列出并考虑兼容
obj.style.filter='alpha(opacity:'+(iCur+speed)+')';
obj.style.opacity=(iCur+speed)/100;
}
else{obj.style[attr]=iCur+speed+'px';}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();}
}
}//json
},30);
}
}
</script>
</head>
<body>
<div id='x'>
<ul>
<li id='a'></li>
<li id='b'></li>
</ul>
</div>
</body>
</html>
2回答
-
- code16
- 2016-03-30 23:40:09
function getStyle(obj,attr){ if(obj.currenStyle){ return obj.currenStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } }调整代码缩进后，看到的第一个问题，getComputedStyle
-
- kevine099
- 2016-04-18 20:41:16
亲，你的定时器能关掉吗？为什么我按照代码敲了一遍，后台打印检测了下，定时器一直在更新啊？？
JS动画效果
113925 学习 · 1443 问题
相似问题