-
透明度查看全部
-
記住透明度變化查看全部
-
后邊改：attr方便傳值查看全部
-
前段1：查看全部
-
物體移入時變寬，或者變高，移出時恢復原來高、寬 ul li{list-style:none;} li{width:200px; height:100px; background-color:yellow; margin-bottom:20px; border:2px solid #0f0; } window.onload=function(){ var li1=document.getElementById("li1"); var li2=document.getElementById("li2"); li1.onmousemove=function(){ move(this,400); } li1.onmouseout=function(){ move(this,200); } } function getstyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } //huofu } function move(obj,target){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var curr=parseInt(getstyle(obj,"height")) var speed=(target-curr)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr==target){ clearInterval(obj.timer); }else{ obj.style['height']=curr+speed+"px"; } },30) }查看全部
-
改前部分：ul li{list-style:none;} li{width:200px; height:100px; background-color:yellow; margin-bottom:20px; border:2px solid #0f0; } window.onload=function(){ li=document.getElementsByTagName("li"); for(var i=0; i<li.length; i++){ li[i].timer=null //自定義定時器分給每個li元素 li[i].onmousemove=function(){ move(this,200); } li[i].onmouseout=function(){ move(this,100); } } } function getstyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } function move(obj,target){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var curr=parseInt(getstyle(obj,"width")) var speed=(target-curr)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr==target){ clearInterval(obj.timer); }else{ obj.style.width=curr+speed+"px"; } },30) }查看全部
-
字體變大，盒子越來越小查看全部
-
獲取樣式查看全部
-
iv{ width:200px; height:200px; background:#f00; border:3px solid #ff0; } </style> <script type="text/javascript"> window.onload=function(){ // div=document.getElementById("div1"); // div.onmousemove=function(){ move(); // } } function move(){ setInterval(function(){ var div=document.getElementById("div1"); //div.style.width=div.offsetWidth-1+"px"; div.style.width = parseInt(getstyle(div,"width"))-1+"px"; div.style.fontSize=parseInt(getstyle(div,"fontSize"))+1+"px"; },30) } function getstyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } //huofu }查看全部
-
最終版body{margin:0; padding:0;} div{width:150px; height:150px; background:#f00; opacity:0.3; filter:alpha(opacity:30); float:left; margin-right:20px; } <div id="div1"></div> <div id="div2"></div> <div id="div3"> </div> window.onload=function(){ var adiv=document.getElementsByTagName('div'); for(var j=0; j<adiv.length; j++){ adiv[j].alpha=30; //解決透明度忽亮忽閃的沖突問題，給每個div自定義透明度 adiv[j].onmousemove=function(){ omove(this,100); } adiv[j].onmouseout=function(){ omove(this,30); } } } function omove(obj,target){ clearInterval(obj.timer); obj.timer =setInterval(function(){ var speed=0; if(obj.alpha>target){ speed =-10; }else{ speed=10; } if(obj.alpha==target){ clearInterval(obj.timer); }else{ obj.alpha+=speed; obj.style.filter="alpha(opacity:"+obj.alpha+")"; obj.style.opacity=obj.alpha/100; } },30); }查看全部
-
多物體透明度查看全部
-
2：window.onload=function(){ li=document.getElementsByTagName("li"); for(var i=0; i<li.length; i++){ li[i].timer=null //自定義定時器 li[i].onmousemove=function(){ move(this,200); } li[i].onmouseout=function(){ move(this,100); } } } //var timer=null; function move(obj,target){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=(target-obj.offsetWidth)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth==target){ clearInterval(obj.timer); }else{ obj.style.width=obj.offsetWidth+speed+"px"; } },30) }查看全部
-
多物體改良版查看全部
-
多物體： ul li{list-style:none;} li{width:200px; height:100px; background-color:yellow; margin-bottom:20px;} </style> <script type="text/javascript"> window.onload=function(){ li=document.getElementsByTagName("li"); for(var i=0; i<li.length; i++){ li[i].onmousemove=function(){ move(this,200); } li[i].onmouseout=function(){ move(this,100); } } } var timer=null; function move(obj,target){ clearInterval(timer); timer=setInterval(function(){ var speed=(target-obj.offsetWidth)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth==target){ clearInterval(timer); }else{ obj.style.width=obj.offsetWidth+speed+"px"; } },30) } </script> <ul> <li>1</li> <li>2</li> <li>3</li> </ul>查看全部
-
多物體運動查看全部
舉報
0/150
提交
取消