-
透明度查看全部
-
记住透明度变化查看全部
-
后边改：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
提交
取消