慕课网

精品课程 JS动画效果

JS动画效果

最热最新

qq_流年依旧灿烂_0

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) }

查看全部

0 采集收起来源：任意属性值（二）
2018-03-22
梧桐初恋

多物体动画，所有属性都不能公用

查看全部

0 采集收起来源：JS多物体动画
2015-07-31
qq_流年依旧灿烂_0

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

查看全部

0 采集收起来源：获取样式
2018-03-22
衍洛雨

有border/padding属性的div运动时不能用offsetX属性获取div的X,因为offsetX获取的是div盒子的属性不是conten的属性！

查看全部

0 采集收起来源：任意属性值（一）
2015-07-31
Failytil

var json={a:12,b:13} for(var i in json){alert(i);alert(json[i]);}

查看全部

0 采集收起来源：完美运动框架
2015-07-30
Failytil

function getStyle(obj,attr){ if(obj.currentStyle){return obj.currentStyle[attr];} }else{return getComputedStyle(obj,false)[attr];} } //currentStyle[attr]IE浏览器 getComputedStyle(obj,false)[attr];火狐浏览器

查看全部

0 采集收起来源：获取样式
2015-07-30
朝夕v8 09:40

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";

查看全部

0 采集收起来源：获取样式
2018-03-22
qq_流年依旧灿烂_0

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

查看全部

0 采集收起来源：JS速度动画
2018-03-22
wengyaqiang

Style对象的属性与css中使用的属性几乎是一一对应的，只是包含连接符的属性则被替换为无连接符的属性，并且替换后的连击符后的单词第一个字母要大写 font-size fontSize background-color backgroundColor

查看全部

0 采集收起来源：获取样式
2015-07-29
wengyaqiang

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";

查看全部

0 采集收起来源：获取样式
2018-03-22
More_imooc

offsetWidth得到的是加上border和padding的值的宽度使用封装的getStyle方法解决问题

查看全部

0 采集收起来源：获取样式
2015-07-29
More_imooc

多物体动画，所有属性都不能公用

查看全部

0 采集收起来源：JS多物体动画
2015-07-29
TAMJING 06:36

一个有趣的动画效果

查看全部

0 采集收起来源：jQuery动画案例
2015-07-29
勇敢的半导体 05:33

jquery里面已经有一个动画的框架。和之前课程里面讲的封装方法很类似。还可以考虑使用css3的方法来实现动画效果。

查看全部

0 采集收起来源：jQuery动画案例
2015-07-28
勇敢的半导体 04:54

json中元素的遍历（其实json的定义格式和js的对象定义基本相同）。

查看全部

0 采集收起来源：完美运动框架
2015-07-28

首页上一页 139 140 141 142 143 144 145 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.您至少已经具备JavaSript的知识。2.您已经具备一些开发经验。

老师告诉你能学到什么？: 1.使用定时器实现简单动画。2.如何一步步封装库。2.培养编程的思想。