JS动画效果_学习笔记

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

JS动画效果

最热最新

ydcg366

window.onload=function(){ var Li1=document.getElementById('li1'); var Li2=document.getElementById('li2'); Li1.onmouseover=function(){ startMove(Li1,'height',400); } Li1.onmouseout=function(){ startMove(Li1,'height',200); } Li2.onmouseover=function(){ startMove(Li2,'width',400); } Li2.onmouseout=function(){ startMove(Li2,'width',200); } } function startMove(obj,attr,iTarget){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=parseInt(getStyle(obj,attr)); var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer);//1.2+++ }else{ obj.style[attr]=icur+speed+'px'; } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }

查看全部

1 采集收起来源：任意属性值（一）
2018-03-22
驴是的念来过倒 09:40

动画方法框架

查看全部

1 采集收起来源：任意属性值（一）
2016-04-11
Eason_Mar

在解释宽度不变只高度变时，两个startmove函数，老师为什么说第一个没执行完时会执行第二个？经过我的测试，可以这样理解，在执行第一个startmove中定时器里面的函数的时候是在设定的30ms后才会执行第一次定时器里面的函数，但之后的程序仍然会继续执行，所以这时就会继续执行下一个startmove函数，而下一个startmove的第一步就是clearinterval,所以你会发现，第一个startmove的定时器中的函数其实根本就没有执行，宽度根本一次都没变，第一个startmove中的定时器在还没有等到30ms开始执行的时候就已经被clearinterval了，所以你会感觉是第一个没执行完就开始执行下一个了

查看全部

1 采集收起来源：同时运动
2016-04-04
桥风L

本节示例代码： //获取样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; // if IE }else{ return getComputedStyle(obj,false)[attr]; //if FireFox } } function animation(obj,attr,target,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var val = 0; if(attr == 'opacity'){ val = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ val = parseInt(getStyle(obj,attr)); } var speed = (target-val)/8; speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); if(val == target){ clearInterval(obj.timer); //判断是否传入了fn if(fn){ fn(); } }else{ if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity:' + val+speed + ')'; obj.style.opacity = (val+speed)/100; } else{ obj.style[attr] = val + speed +"px"; } } },30); };

查看全部

1 采集收起来源：JS链式动画
2018-03-22
桥风L

function getStyle(obj,style){//引用时style要带引号 if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; } }

查看全部

1 采集收起来源：获取样式
2016-04-01
好笑

防止鼠标事件多次触发，采用onmouseenter代替onmouseover

查看全部

1 采集收起来源：jQuery动画案例
2016-03-29
yushenxin

//最终封装的'完美移动框架' function startMove(obj,json,fn){ var flag=true;//标志所有运动是否到达目标值 clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ var curr=0; //判断是否为透明度 if(attr=='opacity'){ curr=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ curr=parseInt(getStyle(obj,attr)); } //移动速度处理 var speed=0; speed=(json[attr]-curr)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr!=json[attr]){ flag=false; } if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+'px'; } } if(flag){ clearInterval(obj.timer); if(fn){ fu(); } } },30); } //取样式 function getStyle(obj,attr){ if(obj.currentStyle){//IE取样式 return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }

查看全部

1 采集收起来源：完美运动框架
2018-03-22
好笑

1、dom.style.xxx 这种写法只能获取行内样式例如 <div ></div> div.style.width能获取到是200px，但是没有出现在引号中的样式是获取不到的 2、万能方法。 getComputedStyle(div,null).xxx 这个是标准方法，需要做一下兼容 currentStyle 是IE的 3、友情赠送获取任何样式的代码 function getStyle(obj,style){//引用时style要带引号 if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; } }

查看全部

1 采集收起来源：获取样式
2018-03-22
xs_wang

div{filter:alpha(opacity=50);} /* for IE8 and earlier */ div{opacity:.5;} /* for IE9 and other browsers */

查看全部

1 采集收起来源：JS透明度动画
2016-03-27
好笑 07:56

缓动速度的计算:目标―当前/比例系数，可以得出速度的正负和速度的缓动，比例系数越大，速度越慢。然后将速度进行取整处理，当速度为负数，向下取整，反之向上取整

查看全部

1 采集收起来源：JS缓冲动画
2016-03-26
lshzndx 03:27

运动框架实现思路

查看全部

1 采集收起来源：JS动画效果课程介绍
2016-03-18
溪墨潺 09:47

IE&火狐区别对待

查看全部

1 采集收起来源：获取样式
2018-03-22
慕运维5208339

缓冲运动：距离和速度成正比：speed=（itarget-oDiv.offsetLeft)/10; alert(Math.floor(3.98))向下取整 alert(Math.ceil(3.22))向上取整遇到这种运动涉及到数字的问题都要做一个判断，向上或者向下取整 // 从用两个函数实现，到用一个函数：两个有很多相同的部分，则相同部分可以共用，不同部分看有什么联系 // 从传入两个参数到一个参数：参数传递尽可能的少 <script> window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); }; oDiv.onmouseout = function(){ startMove(-200); }; }; var timer = null function startMove(offleft){ clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function(){ var speed = (offleft - oDiv.offsetLeft)/10; speed = speed > 0 ?Math.ceil(speed):Math.floor(speed); if(oDiv.offsetLeft == offleft ){ clearInterval(timer); } oDiv.style.left = oDiv.offsetLeft+speed+'px'; },30); } </script

查看全部

1 采集收起来源：JS缓冲动画
2018-03-22
zl_saber

style.left 返回的是字符串，如28px，offsetLeft返回的是数值28 offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距

查看全部

1 采集收起来源：JS速度动画
2016-02-22
wanoneQ

startMove（d1，“width”，300）； startMove（d1，“height”，800）；同时执行两个函数，所以后一个函数执行时会清除前一个上一个函数的定时器。所以实际效果是只执行了后一个函数。

查看全部

1 采集收起来源：同时运动
2016-02-20