JS动画效果_学习笔记

首页免费课 JS动画效果笔记

JS动画效果

最热最新

Better_zxy 09:36

封装好的函数getStyle() 常用于改变元素的样式

查看全部

1 采集收起来源：获取样式
2016-04-26
Better_zxy

设置width的style写在div里和写在文档开头的<style></style>里，获取的div元素的oDiv.style.width不一样（后者会把border padding等的宽度也加上）

查看全部

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

oDiv.style.width=parseInt(getStyle(oDiv,"width"))-2+"px"; oDiv.style.fontSize=parseInt(getStyle(oDiv,"fontSize"))+1+"px"; function getStyle(obj,attr){ if(obj.currentStyle){// IE return obj.currentStyle[attr]; //IE }else{//其他浏览器 return getComputedStyle(obj,false)[attr]; //Firefox } }

查看全部

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

切记：border也有宽度

查看全部

0 采集收起来源：获取样式
2016-04-26
Better_zxy

经验之谈：“多物体运动，所有的东西都不能共用。”

查看全部

0 采集收起来源：JS多物体动画
2016-04-26
Better_zxy

凡是设计运动速度的，关于速度一定要判断一下，并做相应的取整处理。

查看全部

0 采集收起来源：JS缓冲动画
2016-04-26
浅浅妈 09:43

取对象的style（兼容IE,FF）

查看全部

0 采集收起来源：获取样式
2016-04-26
浅浅妈 08:24

缓冲运动

查看全部

0 采集收起来源：JS缓冲动画
2016-04-26
焦永山

A=B>0?MATH.CEIL(SPEED):MATH.FLOOR(SPEED) b>0 speed向上取整 MATH.CEIL 否则 speed向下取整 MATH.FLOOR

查看全部

0 采集收起来源：JS多物体动画
2018-03-22
杨冰i

使用定时器之前一定要先清除一下定时器。

查看全部

0 采集收起来源：JS速度动画
2016-04-25
FEMark 12:10

只要是多物体运动所有的东西都不能共用

查看全部

0 采集收起来源：JS多物体动画
2016-04-25
weibo_卡农201409_0

在这里会出现两个BUG。我都完美的解决了。不要像别人说的那么繁琐。第一个肯定是不能执行回调涵数。只要把flag=true放到定时器下面。第个就是当鼠标移动的时候会出现多次执行涵数，只要鼠标小小的动一下就会执行动画。只要把onmouseover 改成onmouseenter就可以了。这样两个BUG就都解决了

查看全部

4 采集收起来源：JS动画案例
2016-04-24
geeker109

 <style> body,ul,li{padding: 0;margin: 0;}/*初始化，清除浏览器默认样式*/ #oDiv{position:relative;width: 200px;height: 200px;background: red;left:-200px;top:0;}/*oDiv父块样式*/ .hot{ position: absolute;width:30px;text-align: center;padding:10px 0;background: blue;color: #fff;top:72px;left:200px;}/*绝对定位：相对于父块oDiv原点位置*/ </style>

查看全部

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

<script> window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){ strartMove(0); } oDiv.onmouseout=function(){ strartMove(-200); } } var timer=null; function startMove(iTarget){ clearInterval(timer); var oDiv=document.getElementById("div1"); timer=setInterval(function(){ var speed=0; speed=oDiv.offetLeft>iTarget?-10:10 if(oDiv.offsetLeft==-200){ clearInterval(timer); } else{ oDiv.style.left=oDiv.offsetLeft-10+"px"; } },30) } </script>

查看全部

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

function changeColor(obj,iTarget) { clearInterval(obj.timer2); obj.alpha = obj.style.opacity*100; obj.timer2 = setInterval(function(){ var speed = (iTarget - obj.alpha)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if (iTarget!=obj.alpha){ obj.alpha += speed; obj.style.filter = "alpha(opacity:"+obj.alpha+")"; obj.style.opacity = obj.alpha/100; }else { clearInterval(obj.timer2); } },30) }

查看全部

0 采集收起来源：JS多物体动画
2018-03-22