<!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 type="text/css">
*{margin: 0;padding: 0;}
ul,li{list-style: none;}
ul li{
width: 200px;
height: 100px;
background: yellow;
filter: alpha(opacity:30);
opacity: 0.3;
margin:20px;
}
</style>
<script type="text/javascript">
function Move(obj,iTarget,attr,fn){ //动画函数
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var icur=0;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur=parseInt(getStyle(obj,attr));
}
var speed=(iTarget-icur)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(icur==iTarget){
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);
}
window.onload=function(){
var ali=document.getElementsByTagName('li');
ali[0].onmouseover=function(){
Move(this,100,'opacity',function(){
Move(ali[0],300,'width',function(){
Move(ali[0],200,'height');});})
}//bug 360极速浏览器宽度只有296
ali[0].onmouseout=function(){
Move(this,30,'opacity');
}
ali[1].onmouseover=function(){
var othis=this;
Move(othis,300,'width',function(){
Move(othis,200,'height');});
}//后面不能用this,但可以提前提取出来
ali[1].onmouseout=function(){
Move(this,200,'width',function(){
Move(othis,100,'height');});
}
}
function getStyle(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
1 回答
OlderSkee
TA贡献123条经验 获得超103个赞
var speed=(iTarget-icur)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
第一可能是这个除不完
第二可能是你的浏览器缩放过。。。。
添加回答
举报
0/150
提交
取消