-
currentStyle针对IE浏览器，getComputedStyle针对火狐浏览器查看全部
-
offsetWidth表示整个div的值 包括widrh padding border查看全部
-
实现框架查看全部
-
<script> window.onload=function(){ var oMain=document.getElementById('main'), oLis=oMain.getElementsByTagName('a'); for (var i = 0; i < oLis.length; i++) { oLis[i].onmouseover=function(){ var _this=this.getElementsByTagName('i')[0]; startMove(_this,{top:-20,opacity:0},function(){ _this.style.top=30+'px'; startMove(_this,{top:20,opacity:100}) }); }; } } </script>查看全部
-
//获得样式<br> function getStyle(ele,attr){<br> if(ele.currentStyle){ return ele.currentStyle[attr];}<br> else{return getComputedStyle(ele,false).[attr]}<br> }查看全部
-
获取style查看全部
-
window.onload=function(){ var oDiv=document.getElementsByTagName('div'); for(var i=0;i<oDiv.length;i++){ oDiv[i].alpha=30; oDiv[i].timer=null; oDiv[i].onmouseover=function(){ startMove(this,100); } oDiv[i].onmouseout=function(){ startMove(this,30); } } } function startMove(obj,iTarget){ clearInterval(obj.timer); var speed=0; if(obj.alpha>iTarget){ speed=-10; }else{ speed=10; } obj.timer=setInterval(function(){ if(iTarget==obj.alpha){ clearInterval(obj.timer); }else{ obj.alpha +=speed; obj.style.filter='alpha(opacity+'+obj.alpha+')'; obj.style.opacity=obj.alpha/100; } },50); }查看全部
-
<!doctype html> <html lang="en"> <head> <title>多物体-透明度运动</title> <meta charset="utf-8"/> <style type="text/css"> *{margin:0; padding:0;} div{width:200px; height:200px; margin:10px; float:left; background: #F00; opacity:0.3; filter:alpha(opacity:30); } </style> <script src="index.js" > </script> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> <div id="div5"></div> </body> </html>查看全部
-
透明度运动 1、所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性。 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=100) 2、由于无法获取对象的透明度，所以可通过变量储存。（var alpha=初始值 alpha+=speed） window.onload=function(){ var oDiv2=document.getElementById('div2'); oDiv2.onmouseover=function(){ change(30); }; oDiv2.onmouseout=function(){ change(100); }; }; //透明度运动 var timer2=null, alpha=100; function change(iTarget){ var oDiv2=document.getElementById('div2'); clearInterval(timer2); timer2=setInterval(function(){ if(alpha==iTarget){ clearInterval(timer2); }else{ if (alpha>iTarget) { alpha+=-10; }else{ alpha+=10; } oDiv2.style.opacity=alpha/100; oDiv2.style.filter=':alpha(opacity:'+alpha+')'; } },30); } </script>查看全部
-
json解决同时运动问题查看全部
-
运动框架实现思路查看全部
-
function getStyle(obj,attr){//currentStyle针对IE浏览器，getComputedStyle针对firefox浏览器 if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
function getStyle(obj,attr){ obj.currentStyle?return obj.currentStyle[attr]:return getComputerStyle(obj,false)[attr]; }查看全部
-
定时器，先关闭定时器：clearInterval(timer);然后再打开定时器查看全部
-
对元素添加border等属性是，offsetWidh与offsetHeight会发生错误查看全部
举报
0/150
提交
取消