慕课网

精品课程 JS动画效果

JS动画效果

最热最新

饭团小将

存在多项共用一个值，并且这个值会发生改变时，最好单独给赋值，避免出现争用的情况。 <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ // 给每一个li设置一个timer，才不会致使他们去抢timer aLi[i].timer=null; aLi[i].onmouseover=function(){ startMove(this,400); }; aLi[i].onmouseout=function(){ startMove(this,200) } } var oDivLi=document.getElementsByTagName('div'); for(var j=0;j<oDivLi.length;j++){ oDivLi[j].timer=null; oDivLi[j].alpha=30; oDivLi[j].onmouseover=function(){ startMove1(this,100); }; oDivLi[j].onmouseout=function(){ startMove1(this,30); } } };

查看全部

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

4-1 多物体运动 for循环来为每一个TagNameList[i]添加事件并添加属性来区分各自的定时器(用于取消) 为了防止定时器的共用问题，给每一个事件都定义一个定时器利用参数中的this来指定所选择的当前元素多物体不要共用一个值,在对象上定义一个单独的属性保持值 <script> window.onload = function(){ var aLis = document.getElementsByTagName("li"); for(var i=0;i<aLis.length;i++){ aLis[i].timer = null; aLis[i].onmouseover = function(){ startMove(this,400); } aLis[i].onmouseout = function(){ startMove(this,200) } } } //var timer =null; function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (iTarget - obj.offsetWidth)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); obj.style.width = obj.offsetWidth+speed+"px"; },30) } </script>

查看全部

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

3-1 缓冲动画 Math.floor()//向下取整 Math.ceil()//向上取整遇到这种运动涉及到数字的问题都要做一个判断，向上或者向下取整 // 从用两个函数实现，到用一个函数：两个有很多相同的部分，则相同部分可以共用，不同部分看有什么联系 // 从传入两个参数到一个参数：参数传递尽可能的少 <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>

查看全部

0 采集收起来源：JS缓冲动画
2018-03-22
饭团小将

2-2 透明度动画 <style> *{margin:0px;padding:0px;} #div1{ width:200px; height:200px; background:red; filter:alpha(opacity:30);//透明度为30 opacity:30px; } </style> <script> window.onload = function(){ var oDiv =document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(100); } oDiv.onmouseout=function(){ startMove(30); } } var timer = null; var alpha = 30; function startMove(iTarget){ var oDiv =document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ var speed = 0; if(alpha>iTarget){ speed = -10; } else{ speed = 10; } if(alpha == iTarget){ clearInterval(timer) } else{ alpha+=speed; oDiv.style.opacity = alpha/100;主流//基于IE oDiv.style.filter = 'alpha(opacity:'+alpha+')'; DOM元素.style.filter = 'alpha(opacity:' + alpha + ')'(非主流，IE8前) } },30) } </script> <body> <div id = "div1"></div> </body>

查看全部

0 采集收起来源：JS透明度动画
2018-03-22
饭团小将

2-1：速度动画：为防止动画累加，在每次触发动画事件时，应该先清除前一个没有完成的动画，即清除全部开启的定时器，然后这次再开启一个定时器。 offsetLeft值可以获取当前的left值，而offsetLeft属性不能被赋值，只能获取 window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); }; oDiv.onmouseout = function(){ startMove(-200); }; }; var timer = null function startMove(offleft//itager 目标值){ clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function(){ var speed = 0; if(oDiv.offsetLeft > offleft ){ speed = -10; }else if(oDiv.offsetLeft < offleft) { speed = 10; }else{ clearInterval(timer); } oDiv.style.left = oDiv.offsetLeft+speed+'px'; },30); }

查看全部

0 采集收起来源：JS速度动画
2018-03-22
饭团小将

1-1 课程介绍 JS动画效果：运动框架实现思路： 1.速度（改变值left,right,width,height,opacity) 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动

查看全部

0 采集收起来源：JS动画效果课程介绍
2015-07-26
黄卷青灯 03:31

运动框架实现思路

查看全部

0 采集收起来源：JS动画效果课程介绍
2015-07-26
冥冥之中跟你走 06:53

jquery方法

查看全部

0 采集收起来源：jQuery动画案例
2015-07-25
花花丹

【多物体运动】注意变量定义不要共用，写在自己的for循环里。

查看全部

0 采集收起来源：JS多物体动画
2015-07-21
fat401

offsetLeft与style.left的区别 offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的，区别在于： 1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetLeft比较方便。 2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。 3. style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html里，我做过试验，如果定义在 css里，style.left的值仍然为空，这就是我刚开始碰到的问题，总是取不到style.left的值。 offsetLeft则仍然能够取到，无需事先定义div的位置。 serInterval(....)为创建一个定时器 clearInterval(...)为清除一个定时器

查看全部

0 采集收起来源：JS速度动画
2015-07-19
fat401 03:29

运动框架搭建思路图

查看全部

0 采集收起来源：JS动画效果课程介绍
2015-07-18
慕设计3743538 07:18

math.floor()//向下取整 math.ceil()//向上取整

查看全部

0 采集收起来源：JS缓冲动画
2015-07-18
慕设计3743538

jq fsngfa

查看全部

0 采集收起来源：jQuery动画案例
2015-07-18
weibo_深沉晖_0

多物体运动 for循环来为每一个TagNameList[i]添加事件并添加属性来区分各自的定时器(用于取消) 利用参数中的this来指定所选择的当前元素多物体不要共用一个值,在对象上定义一个单独的属性保持值

查看全部

0 采集收起来源：JS多物体动画
2015-07-18
weibo_深沉晖_0

透明度动画属性: filter: alpha(opacity:30) ; 通过变量alpha存储元素透明度来与目标值判断 DOM元素.style.filter = 'alpha(opacity:' + alpha + ')'(非主流，IE8前) DOM元素.style.opacity = alpha / 100(主流)

查看全部

0 采集收起来源：JS透明度动画
2015-07-17

首页上一页 142 143 144 145 146 147 148 下一页尾页

0/150

提交

取消

开始学习

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

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