-
//最终封装的'完美移动框架' function startMove(obj,json,fn){ clearInterval(obj.timer); var flag;//标志所有运动是否到达目标值 obj.timer=setInterval(function(){ flag=true; //进入定时器时,现将flag设置为所有的属性都已达到目标值 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; //假设有三个json的key/value值,这三个值中只要有一个没有达到目标值,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){ fn(); } } },30); }查看全部
-
缓冲运动要向上或向下取整 多物体运动时，多传入一个参数obj，就可以获取变换的物体 多物体运动时，所有的东西都不能共用查看全部
-
<!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>查看全部
-
function startMove(obj,attr,iTarget,fn){ //添加一个回调函数fn clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=null; //1.判断类型 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur==iTarget){ clearInterval(obj.timer); if(fn){ //判断是否存在回调函数,并调用 fn(); } }else{ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }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]; } }查看全部
-
链式运动函数： 鼠标移开执行的动作 与 鼠标滑过的动作相反 。(递归方式) window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.timer = null; oDiv.onmouseover = function(){ startMove(oDiv,'width',400,function(){ startMove(oDiv,'height’,200,function(){ startMove(oDiv,'opacity',100); }); }); }; oDiv.onmouseout = function(){ startMove(oDiv,'opacity’,30,function(){ startMove(oDiv,'height’,100,function(){ startMove(oDiv,'width',200) }) }); }; };查看全部
-
怎么获取一个动态变化的速度值，每次都用目标减去当前值再获取一个百分比即可，运用了数学的知识。宽高的像素单位没有小数点，可以利用js的原生函数获取向上取整ceil或者向下取整floor 缓冲运动： 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);// 条件操作位 这个表达式的意思是如果speed大于0（关系表达式返回true），则将Math.ceil(speed)向下去整赋值给 speed，反之则将Math.floor(speed)向上去整赋值给 speed查看全部
-
本节示例代码： <script type="text/javascript"> window.onload = function(){ var oDiv =document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); }; oDiv.onmouseout = function(){ startMove(-200); }; }; var timer = null; function startMove(target){ var oDiv =document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ var speed = (target - oDiv.offsetLeft)/20; speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); if(oDiv.offsetLeft == target){ clearInterval(timer); } else{ oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } },30); }; </script>查看全部
-
this写在DOM事件里的function（）中。查看全部
-
速度动画查看全部
-
动画函数只需传入目标参数，速度可在函数中定义，同一种类型的运动可以用同一函数，采用传参的方式，如左右移动 透明度运动 1、所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性。 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=100) 2、由于无法获取对象的透明度，所以可通过变量储存。（var alpha=初始值 alpha+=speed） window.onload=function(){ var oDiv2=document.getElementById('div2'); oDiv2.onmouseover=function(){ change(30); }; oDiv2.onmouseout=function(){ change(100); }; }; //透明度运动 var timer2=null, alpha=100; function change(iTarget){ var oDiv2=document.getElementById('div2'); clearInterval(timer2); timer2=setInterval(function(){ if(alpha==iTarget){ clearInterval(timer2); }else{ if (alpha>iTarget) { alpha+=-10; }else{ alpha+=10; } oDiv2.style.opacity=alpha/100; oDiv2.style.filter=':alpha(opacity:'+alpha+')'; } },30); } </script> IE：style.filter=‘alpha(opactiy:’+值+')' 非IE .style.opactiy=值/100（火狐或者chrome关于透明度的满值1，IE是100）查看全部
-
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的位置。查看全部
-
不清理掉定时器，每次鼠标移入都会触发新的，速度也会累加 代码相同的情况下可以用传参的方式复用同一套代码；功能相同的情况下，一般参数越少越好 匀速运动： 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); } style.left 返回的是字符串，如28px，offsetLeft返回的是数值28 offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 offset:当前位置 window.onload=function(){}一进来就加载查看全部
-
想做链式运动，就在每次执行的函数后再传一个参数，这个参数代表紧接着执行的函数。 如果链式运动需要累加，那不断传参，写函数就行了。查看全部
-
获取容器某个具体的样式： obj.currentStyle[type]; 针对IE浏览器 getComputedStyle(obj, false)[type]; 针对FireFox浏览器 比如，我要获取容器obj的宽（该容器存在border边框）： eWidth = obj.currentStyle[width] || getComputedStyle(obj,false)[width]; 而不能使用offsetWidth，因为offsetWidth获取的是整个容器（包含边框等属性）的宽。查看全部
举报
0/150
提交
取消