JS动画效果_学习笔记

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

JS动画效果

最热最新

吃瓜小夏

<script type="text/javascript"> window.onload=function(){ var div1=document.getElementById("div1"); div1.onmouseover=function(){startMove(this,"width",200)}; div1.onmouseout=function(){startMove(this,"width",100)}; var div2=document.getElementById("div2"); div2.onmouseover=function(){startMove(this,"height",200)}; div2.onmouseout=function(){startMove(this,"height",100)}; } function startMove(obj,attr,target){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=(target-parseInt(getStyle(obj,attr)))/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(parseInt(getStyle(obj,attr))==target){clearInterval(obj.timer)} //obj.style.width=obj.style[attr] 注意 style[attr] else{obj.style[attr]=parseInt(getStyle(obj,attr))+speed+"px"} },30) } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr] } else{return getComputedStyle(obj,false)[attr];} } </script> </head> <body> <div id="div1"> </div> <div id="div2"></div>

查看全部

0 采集收起来源：任意属性值（一）
2018-03-22
小光zg 03:27

运动框架实现思路

查看全部

0 采集收起来源：JS动画效果课程介绍
2016-05-11
吃瓜小夏 05:20

window.onload=function(){<br> var ali=document.getElementsByTagName("li");<br> for(i=0;i<ali.length;i++)<br> {ali[i].onmouseover=function(){startMove(this,200)};<br> ali[i].onmouseout=function(){startMove(this,100)};<br> }<br> }<br> var timer=null;<br> function startMove(obj,target){<br> clearInterval(obj.timer);<br> obj.timer=setInterval(function(){<br> var speed=(target-obj.offsetWidth)/8;<br> speed=speed>0?Math.ceil(speed):Math.floor(speed);<br> if(obj.offsetWidth==target){clearInterval(obj.timer)}<br> else{obj.style.width=obj.offsetWidth+speed+"px"}<br> },30)<br> } <br> 传参 obj和target

查看全部

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

[JS動畫效果 - 緩衝動畫] 速度動畫和透明度動畫都屬於「定速運動」, 而緩衝動畫則是「變速運動」遇到變速運動的時候, 記得都要判斷一下向上取整/向下取整. 不然是都會出錯的 1、速度的定義： var speed=(目標值-當前值（offset）)/20； 2、取整函數：向下取整：Math.floor(3.55); //3.55是取整的數值，結果為：3 向上取整：Math.ceil(3.35); //結果為：4 3、由於運算出現浮點數，而px無法顯示小數值，所以需要取整速度的取整判斷： speed=speed > 0?Math.ceil(speed):Math.floor(speed);

查看全部

0 采集收起来源：JS缓冲动画
2018-03-22
攻錯

currentStyle主要针对IE浏览器

查看全部

0 采集收起来源：获取样式
2016-05-10
吃瓜小夏

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>普通速度动画</title> <style type="text/css"> *{margin:0;padding:0;} div{width:100px;height:100px;background-color:#C00;position:relative;left:-100px;top:0;} span{background-color:blue;width:40px;height:40px;line-height:40px;top:30px;position:absolute;left:100px;} </style> <script type="text/javascript"> window.onload=function(){ var mdiv=document.getElementById("wrapper"); mdiv.onmouseover=function(){startmove(0)}; mdiv.onmouseout=function(){startmove(-100)}; } var timer=null; function startmove(itarget){ var mdiv=document.getElementById("wrapper"); clearInterval(timer); timer=setInterval(function(){ var speed=(itarget-mdiv.offsetLeft)/20; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(mdiv.offsetLeft==itarget){clearInterval(timer)} else{mdiv.style.left=mdiv.offsetLeft+speed+"px"} },30) } </script> </head> <body> <div id="wrapper"> <span id="span">微信</span> </div>

查看全部

0 采集收起来源：JS缓冲动画
2018-03-22
吃瓜小夏 08:20

var speed=speed>0?Math.ceil(speed):Math.floor(speed) Math.ceil()向上取整 floor（)向下取整注意Math 大写

查看全部

0 采集收起来源：JS缓冲动画
2018-03-22
吃瓜小夏

<style type="text/css"> *{margin:0;padding:0;} div{width:100px;height:100px;background-color:#C00;position:relative;left:-100px;top:0;} span{width:20px;height:50px;background-color:#33F;position:absolute;left:100px;top:30px;} </style> <script type="text/javascript"> window.onload=function(){ var mdiv=document.getElementById("wrapper"); mdiv.onmouseover=function(){startmove(0)}; mdiv.onmouseout=function(){startmove(-100)}; } var timer=null; function startmove(itarget){ var mdiv=document.getElementById("wrapper"); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(mdiv.offsetLeft>itarget){speed=-10}else{speed=10} if(mdiv.offsetLeft==itarget){clearInterval(timer)} else{mdiv.style.left=mdiv.offsetLeft+speed+"px"}},30) } </script> </head> <body> <div id="wrapper"> <span id="span">微信</span> </div> </body> </html>

查看全部

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

运动框架的实现思路 1.速度（改变left，right，width，height，opacity） 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动

查看全部

0 采集收起来源：JS动画效果课程介绍
2016-05-09
慕尼黑3610395

window.onload=function(){ var Div=document.getElementById('id'); Div.onmouseover=function(){ startMove(100); } Div.onmouseout=function(){ startMove(30); } } var timer=null; var alpha=30; stratMove(iTarget){ var Div=document.getElementById('id'); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha>iTarget){ speed=-10; } else{ speed=10; } if(alpha==iTarget){ clearInterval(timer);} else{ alpha+=speed; Div.style.filter='alpha(opactiy:'+alpha+')'; Div.style.opactiy=alpha/100; } },30) } }

查看全部

0 采集收起来源：JS透明度动画
2018-03-22
真到假时

function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStye(obj,false)[attr]; } }

查看全部

0 采集收起来源：任意属性值（一）
2016-05-05
_heyshadow 14:41

物体多属性同时改变。多物体同时运动。以及防止运动不全

查看全部

0 采集收起来源：完美运动框架
2016-05-05
_heyshadow 04:47

通过for-in循环获取JSON中的值。

查看全部

0 采集收起来源：完美运动框架
2016-05-05
_heyshadow

加一个参数，在函数体内调用一个回调函数。来实现链式运动。鼠标移入的执行顺序恰与鼠标移出的执行顺序相反。

查看全部

0 采集收起来源：JS链式动画
2016-05-05
呆脑袋 08:23

缓冲运动

查看全部

0 采集收起来源：JS缓冲动画
2016-05-05