-
window.onload = function(){ var Li1=document.getElementById('li1'); var Li2=document.getElementById('li2'); Li1.onmousemove=function(){ startMove(this,'opacity',100); } Li1.onmouseout=function(){ startMove(this,'opacity',30); } Li2.onmousemove=function(){ startMove(this,'left',400); } Li2.onmouseout=function(){ startMove(this,'left',200); } } function startMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var cur=0; if(attr == 'opacity'){//判断属性是否为透明度 cur=Math.round(parseFloat(getStyle(obj,attr))*100);//parseFloat获取小数,Math.round四舍五入 } else{ cur =parseInt(getStyle(obj,attr)); } var speed = (iTarget - cur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(cur == iTarget){ clearInterval(obj.timer); } else{ if(attr=='opacity'){ obj.style.opacity = (cur+speed)/100; obj.style.filter='alpha(opacity:'+(cur+speed)+')'; } else{ obj.style[attr]= cur+speed+"px"; } } },50) }查看全部
-
多物体动画，所有属性都不能公用查看全部
-
<script>window.onload=function(){ start(); } function start(){ setInterval(function(){ var oid=document.getElementById("div1"); oid.style.width=parseInt(getStyle(oid,"width"))-1+"px"; oid.style.height=parseInt(getStyle(oid,"height"))-1+"px"; },30) } function getStyle(obj,attr){ if(obj.currentStyle){//ie return obj.currentStyle[attr];//针对IE }else{ return getComputedStyle(obj,false)[attr];//针对firefox } } </script>查看全部
-
有border/padding属性的div运动时不能用offsetX属性获取div的X,因为offsetX获取的是div盒子的属性 不是conten的属性！查看全部
-
var json={a:12,b:13} for(var i in json){alert(i);alert(json[i]);}查看全部
-
function getStyle(obj,attr){ if(obj.currentStyle){return obj.currentStyle[attr];} }else{return getComputedStyle(obj,false)[attr];} } //currentStyle[attr]IE浏览器 getComputedStyle(obj,false)[attr];火狐浏览器查看全部
-
offsetWidth取的是整个边框的宽度（包含padding和border宽）。而style.width则指的是content的width。为了获取content的width，不可以用offsetWidth，而应该用图示的函数。 oDiv.style.width 当width:200px;等样式写在样式表中时，无法直接获得oDiv.style.xxx，（写在内联样式中才表示该元素拥有style属性才能得到oDiv.style.xxx），所以要获取样式，需要通过函数： function getStyle(obj,attr){ if (obj.currentStyle) { return obj.currentStyle[attr];//IE浏览器 } else{ return getComputedStyle(obj,false)[attr]; }; } parseInt(getStyle(obj,'width')) ———————— oDiv.style.width=oDiv.style.width-1+"px";是错误的，因为oDiv.style.width得到的是字符串（如200px)，不能直接和-1+"px"连接起来成为新的值，需要用parseInt()方法： oDiv.style.width=parseInt(oDiv.style.width)-1+"px";查看全部
-
<style> *{margin:0;padding:0;} #div1{ width:200px; height:100px; background:#0F3; position:relative; left:-200px;} #div1 span{ display:block; height: 46px; position: absolute; right: -23px; width: 23px; text-align:center; background:#F00; } </style> <script> window.onload=function(){ var oid=document.getElementById('div1'); oid.onmouseover=function(){ startmove(0); } oid.onmouseout=function(){ startmove(-200); } } var timer=null; function startmove(offsetleft){ clearInterval(timer);//清除定时器 timer=setInterval(function(){ var speed=0; var oid=document.getElementById('div1'); // if(oid.offsetLeft==0){ if(oid.offsetLeft>offsetleft){ speed=-10;} else if(oid.offsetLeft<offsetleft){ speed=10; } else{ clearInterval(timer);} oid.style.left=oid.offsetLeft+speed+'px'; } ,30); } </script> </head> <body> <div id="div1"> <span>分享</span> </div>查看全部
-
Style对象的属性与css中使用的属性几乎是一一对应的，只是包含连接符的属性则被替换为无连接符的属性，并且替换后的连击符后的单词第一个字母要大写 font-size fontSize background-color backgroundColor查看全部
-
oDiv.style.width 当width:200px;等样式写在样式表中时，无法直接获得oDiv.style.xxx，（写在内联样式中才表示该元素拥有style属性才能得到oDiv.style.xxx），所以要获取样式，需要通过函数： function getStyle(obj,attr){ if (obj.currentStyle) { return obj.currentStyle[attr];//IE浏览器 } else{ return getComputedStyle(obj,false)[attr]; }; } parseInt(getStyle(obj,'width')) ———————— oDiv.style.width=oDiv.style.width-1+"px";是错误的，因为oDiv.style.width得到的是字符串（如200px)，不能直接和-1+"px"连接起来成为新的值，需要用parseInt()方法： oDiv.style.width=parseInt(oDiv.style.width)-1+"px";查看全部
-
offsetWidth得到的是加上border和padding的值的宽度 使用封装的getStyle方法解决问题查看全部
-
多物体动画，所有属性都不能公用查看全部
-
一个有趣的动画效果查看全部
-
jquery里面已经有一个动画的框架。和之前课程里面讲的封装方法很类似。还可以考虑使用css3的方法来实现动画效果。查看全部
-
json中元素的遍历（其实json的定义格式和js的对象定义基本相同）。查看全部
举报
0/150
提交
取消