<!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){?????????????//動(dòng)畫函數(shù)
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'){??????????????//當(dāng)想改變透明度的時(shí)候用這個(gè)
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,但可以提前提取出來(lái)
????????????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>
用360極速瀏覽器運(yùn)行，寬高未能達(dá)到目標(biāo)值，而其他瀏覽器可以，為什么呢？
清風(fēng)之境
2016-09-19 18:47:11
