猿问

用360极速浏览器运行,宽高未能达到目标值,而其他浏览器可以,为什么呢?

<!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>


清风之境
浏览 1231回答 1
1回答

OlderSkee

 var speed=(iTarget-icur)/5;            speed=speed>0?Math.ceil(speed):Math.floor(speed);第一可能是这个除不完第二可能是你的浏览器缩放过。。。。
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答