-
setInterval:定时器。 clearInterval:清除定时器。查看全部
-
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>多物体改变透明度</title> <style> *{margin:0;padding:0;} div{width:100px;height:100px;margin:10px;float:left;background:green;filter:alpha(opacity:30);opacity:0.3;} </style> <script> window.onload=function(){ var oDiv=document.getElementsByTagName('div'); for(var i=0,l=oDiv.length;i<l;i++){ oDiv[i].alpha=30; oDiv[i].onmouseover=function(){ startChange(this,100); } oDiv[i].onmouseout=function(){ startChange(this,30); }}} function startChange(obj,target){ clearInterval(obj.timer); var speed=obj.alpha>target?-10:10; obj.timer=setInterval(function(){ //var speed=obj.alpha>target?-10:10; if(obj.alpha==target){ clearInterval(obj.timer); }else{ obj.alpha+=speed; obj.style.filter='alpha(opacity:'+obj.alpha+')'; obj.style.opacity=obj.alpha/100; }},30)} </script> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </body> </html>查看全部
-
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>多物体移动</title> <style type="text/css"> *{margin:0;padding:0;} ul{list-style:none;} ul li{width: 200px;height: 100px;background: yellow;margin-bottom: 20px;} </style> <script type="text/javascript"> window.onload=function(){ var olis=document.getElementsByTagName('li'); for(var i=0,l=olis.length;i<l;i++){ olis[i].timer=null; olis[i].onmouseover=function(){ startMove(this,400); } olis[i].onmouseout=function(){ startMove(this,200); }}} //var timer=null; function startMove(obj,target){ clearInterval(obj.timer); var speed=(target-obj.offsetWidth)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); obj.timer=setInterval(function(){ if(obj.offsetWidth==target){ clearInterval(obj.timer); }else{ obj.style.width=obj.offsetWidth+speed+'px'; }},30)} </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>查看全部
-
缓冲效果： opacity：所有浏览器都支持opacity属性。 注释：IE8以及更早的版本支持替代的filter属性。 如：filter:Alpha(opacity=50) 缓冲运动的速度值一定要转换成整数，不然将到达不了终点，是用Math.ceil()还是Math.floor()要看就提情况 动画大致模版（思路）： <script type="text/javascript"> var timer=null; function startMove (iTarget) { clearInterval(timer); var obj=document.getElementById('obj'); timer=setInterval(function () { var speed=0; if(obj.属性>iTarget){ spped=-num; } else{ speed=num; } if(obj.属性==iTarget){ clearInterval(timer); } else{ obj...=obj.属性+speed... } }, 毫秒)} </script>查看全部
-
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{margin:0; padding:0;} #div1{width:500px; height:500px; background: #F00; opacity:0.3; filter:alpha(opacity:30);} /* opacity:0.3; filter:alpha(opacity:30)设置透明度*/ </style> <script type="text/javascript"> window.onload = function(){ var odiv = document.getElementById('div1'); odiv.onmouseover = function(){ startMove(100); } odiv.onmouseout = function(){ startMove(30); }} var time = null; var alpha = 30; //透明度没有属性所以，创建透明变量，并赋值属性 function startMove(iTarget){ var odiv = document.getElementById('div1'); clearInterval(time); time = setInterval(function(){ var speed = 0; if(alpha < iTarget){ speed = 10; } else { speed = -10; } if(alpha == iTarget){ clearInterval(time); } else { alpha += speed; odiv.style.filter = 'alpha(opacity:'+alpha+')'; odiv.style.opacity = alpha / 100; }},50);} </script> </head> <body> <div id="div1"></div> </body> </html>查看全部
-
匀速运动： 1.设置定时器，每隔一段时间更改位置，达到匀速运动 2.设置定时器前需清除定时器，以防多次触发重复生成多个定时器 3.当运动位置达到目标值时，可通过清除定时器停止运动 4.当定义函数多处相同时，可封装为一个函数，用不同参数调用，尽量少传递相同的参数 <script type="text/javascript"> window.onload=function(){ var oDiv1=document.getElementById('div1'); oDiv1.onmouseover=function(){ starMove(0); }; oDiv1.onmouseout=function(){ starMove(-200); };}; //匀速运动 var timer1=null; speed=0; function starMove(iTarget){ var oDiv1=document.getElementById('div1'); clearInterval(timer1); timer1=setInterval(function(){ if(oDiv1.offsetLeft==iTarget){ clearInterval(timer1); }else{ if(iTarget<0){ speed=-10; }else{ speed=10; } oDiv1.style.left=oDiv1.offsetLeft+speed+'px'; } },30); }查看全部
-
left 和 top 只有在定位元素上才会起作用。 定位： position：static relative absolute fixed 默认值：static 适用于：除display属性定义为table-column-group table-column之外的所有元素。 static： 对象遵循常规流。此时4个定位偏移属性不会被应用。 relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。 absolute： 对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。 fixed： 与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。 当元素定位后，left就是修改到定位父级左边的距离，top就是修改到定位父级顶部的距离查看全部
-
jQuery方法实现动画效果查看全部
-
1、dom.style.xxx 这种写法只能获取行内样式 例如 <div ></div> div.style.width能获取到是200px，但是没有出现在 引号中的样式是获取不到的 2、万能方法。 getComputedStyle(div,null).xxx 这个是标准方法，需要做一下兼容 currentStyle 是IE的 3、友情赠送获取任何样式的代码 function getStyle(obj,style){ if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; } }查看全部
-
filter的参数里面opacity拼写错了。。。查看全部
-
Ps1：opacity：所有浏览器都支持 opacity 属性。<br> 注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。<br> <br> Ps2：缓冲运动的速度值一定要转换成整数，不然将到达不了终点，是用Math.ceil(),还是Math.floor(),要看就提情况。 Math.floor();向下取整 Math.ceil();向上取整 由于数值设置的原因，div移动到一定px后，进行相减再除20的运算后会出现小数，比如0.75，比如这时div移动到了290，程序里写到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,而浏览器是不允许出现小数的，会把0.75去掉，那么div的left就成了290，下次执行时div的left是290，算出来速度还是0.75，浏览器又省略了小数，结果就是div停在了290px，到不了目标点300。查看全部
-
动画前提： 1. 移动对象使用relative 定位 2. 用对象的left，right, top, bottom 的持续变化实现运动效果 3. 通过timer的间隔和每次移动的步数来控制移动速度 注意点： 为了精确控制速度，要注意清除timer，以免timer重复触发。 为了避免代码重复，可将相同功能的函数抽象成一个函数，通过传递不同的参数来实现不同的运动轨迹查看全部
-
多物体 function startMove(obj,attr,target) { clearInterval(obj.timer); obj.timer=setInterval(function (){ var icu=parseInt(getStyle(obj,attr)); var speed=(target-icu)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if (target==icu){ clearInterval(obj.timer); }else{ obj.style[attr]=icu+speed+'px'; } } ,30) }查看全部
-
运动框架实现思路： 1.速度（改变值left、right、width、height、opacity） 2.缓冲运动 3.多物体运动 4.任意值变动 5.链式运动 6.同时运动查看全部
-
任意属性查看全部
举报
0/150
提交
取消