JS动画效果_学习笔记

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

JS动画效果

最热最新

john999

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,ul,li{padding: 0;margin: 0;} #oDiv{position:relative;width: 200px;height: 200px;background: red;left:-200px;top:0;} .hot{ position: absolute;width:30px;text-align: center;padding:10px 0;background: blue;color: #fff;top:72px;left:200px;} </style> </head> <body> <div id="oDiv"> <div class="hot" id="hot">热点</div> </div> </body> <script> window.onload=function () { var oDiv=document.getElementById('oDiv'); oDiv.onmouseover=function(){ startMove(this,0); } oDiv.onmouseout=function(){ startMove(this,-200); } } var timer=null; function startMove(obj,iTarget){ clearInterval(timer); timer = setInterval(function(){ iSpeed=obj.offsetLeft>iTarget?-10:10; if(obj.offsetLeft==iTarget){ clearInterval(timer); } else{ obj.style.left=obj.offsetLeft+iSpeed+'px'; } },30); } </script> </html>

查看全部

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

只要是多物体运动

查看全部

0 采集收起来源：JS多物体动画
2016-03-01
Shineon 14:35

flag=ture要定义在定时器内，否则flag永远等于flase

查看全部

0 采集收起来源：完美运动框架
2016-02-29
前端狩猎者

多物体运动，注意定时器还有其他的属性不共用

查看全部

0 采集收起来源：JS多物体动画
2016-02-28
loserliu

qq_小天狼星_0 匀速运动：<br> 1、设置定时器，每隔一段时间更改位置，达到匀速运动<br> 2、设置定时器前需清除定时器，以防多次触发重复生成多个定时器<br> 3、当运动位置达到目标值时，可通过清除定时器停止运动<br> 4、当定义函数多处相同时，可封装为一个函数，用不同参数调用，尽量少传递相同的参数<br>

查看全部

2 采集收起来源：JS速度动画
2018-03-22
向前lc

<!doctype html> <html> <head> <title></title> <meta charset='UTF-8'/> <style type='text/css'> *{ padding:0; margin:0; } #div1{ width:200px; height:100px; background:red; } </style> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(1000); } oDiv.onmouseout=function(){ startMove(100); } var timer=null; function startMove(iTarget){ clearInterval(timer); timer=setInterval(function(){ var speed=0; if(iTarget>200){ speed=10; }else{ speed=-10; } if(oDiv.offsetWidth==iTarget){ clearInterval(timer); }else{ oDiv.style.width=oDiv.offsetWidth+speed+'px'; } },30); } } </script> </head> <body> <div id='div1'></div> </body> </html>

查看全部

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

1、小数在计算机中表示存在误差（alert(0.07*100)）结果不是7；我们使用Math.round函数来解决； 2、Math(parseFloat(getStyle(obj,attr))*100)使用这样的方法来获取透明度alpha的当前值

查看全部

0 采集收起来源：任意属性值（二）
2016-02-27
glenhappy

原来代码结构调整： 1、原来用以表示div宽度的offsetWidth改用了width属性来表示（当然用的是getStyle方法），说实话还是系统学习比网上零星的知识来的更加酣畅伶俐； 2、如果要改变任意属性值（比如obj的宽度和高度）那么，此时startMove可以传递一个属性名称进去。

查看全部

0 采集收起来源：任意属性值（一）
2016-02-27
glenhappy

总结一下（使用楼上的，总结的蛮到位）： 1、offsetWidth返回的是oDrag的padding+border+width值之和； 2、style.width返回的行内样式，但是返回的是字符串，所以用parseInt转换为数值；这里注意为什么之前用offsetWidth而不用style.width来获取宽度的原因； 3、为了实现样式和结构分离，减少行内元素，可以封装getStyle函数来获取css里面定义的样式属性。总结的太好，犀利。。。。。

查看全部

0 采集收起来源：获取样式
2016-02-27
xf驿站

1、获取当前透明度不用parseInt<br> 2、设置透明度要考虑兼容<br> obj.style.filter='alpha(opacity:'+(当前透明度+变化速度)+')';<br> obj.style.opacity=(当前透明度+变化速度)/100;<br>针对chrome和火狐浏览器 3、透明度不加“px”<br> 在使用parseInt()时处理透明度小数时,会有影响单位设置<br> 相应位置进行判断 IE/FireFox<br> 取相应值 Math.round()四舍五入取整数值<br> Math.round(parseFloat(getStyle(obj,attr))*100)

查看全部

0 采集收起来源：任意属性值（二）
2018-03-22
Shineon 11:32

getStyle函数获取样式

查看全部

0 采集收起来源：获取样式
2016-02-26
xf驿站

多物体运动 1. for循环来为每一个TagNameList[i]添加事件并添加属性来区分各自的定时器(用于取消) 2. 利用参数中的this来指定所选择的当前元素 3. 多物体不要共用一个值,在对象上定义一个单独的属性（存在多项共用一个值，并且这个值会发生改变时，最好单独给赋值，避免出现争用的情况。）

查看全部

0 采集收起来源：JS多物体动画
2016-02-26
Ghostliming 05:01

对于缓冲速度进行向上向下取整

查看全部

0 采集收起来源：JS多物体动画
2016-02-25
小小小呀

json = {name:key,name:key }

查看全部

0 采集收起来源：完美运动框架
2016-02-25
qq_小天狼星_0

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

查看全部

0 采集收起来源：JS动画案例
2018-03-22