1.设置元素为绝对定位,left、top才有效
<style> #div1{width:100px;height:200px;background:#CCC;position:absolute;left:-100px;} #div1 span{width:20px;height:60px;left:100px;top:70px;background:yellow;line-height:20px;text-align:center;position:absolute;} </style>
var timer=null; function startMove(iSpeed,iTarget){ var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ if(oDiv.offsetLeft==iTarget){ clearInterval(timer); } else{ oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; } },30) }3. 调用
window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(10,0); } oDiv.onmouseout=function(){ startMove(-10,-100); } }
1. 速度=(目标值-当前值)/缩放系数;BUG:速度取整,不然会闪(向上取证:Math.ceil(iSpeed)----向下取整:Math.floor(iSpeed))
2. 缓冲框架(注意:有除法的地方,就得考虑小数)
<script> var timer=null; function startMove(iTarget){ var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ var iSpeed=(iTarget-oDiv.offsetLeft)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(oDiv.offsetLeft==iTarget){ clearInterval(timer); } else{ oDiv.style.left = oDiv.offsetLeft + iSpeed + "px"; } }, 30); } </script>
1. 定时器作为对象的属性,每一个div一个定时器
function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var iSpeed=(iTarget-obj.alpha)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(obj.alpha==iTarget){ clearInterval(obj.timer); } else{ obj.alpha+=iSpeed; obj.style.filter='alpha(opacity:'+obj.alpha+')'; obj.style.opacity=obj.alpha/100; } }, 30); }
window.onload=function(){ var aDiv=document.getElementsByTagName('div'); for(var i=0;i<aDiv.length;i++){ aDiv[i].alpha=30; aDiv[i].onmouseover=function(){ startMove(this,100); } aDiv[i].onmouseout=function(){ startMove(this,30); } } }
1. offsetWidth包括width、padding、border的值,,可以封装函数
function getStyle(element, attr) { //IE写法 if (element.currentStyle) { return element.currentStyle[attr]; //标准 } else { return getComputedStyle(element, false)[attr]; } }
2. getStyle获取的是字符串:10px,需要parseInt()
function startMove(element, attr, iTarget) { clearInterval(element.timer); element.timer = setInterval(function () { //因为速度要动态改变,所以必须放在定时器中 var iCurrent = 0; if (attr === "opacity") { //为透明度时执行。 iCurrent = Math.round(parseFloat(getStyle(element, attr)) * 100); } else { //默认情况 iCurrent = parseInt(getStyle(element, attr)); //实际样式大小 } var iSpeed = (iTarget - iCurrent) / 10; //(目标值-当前值)/缩放系数=速度 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //速度取整 if (iCurrent === iTarget) {//结束运动 clearInterval(element.timer); } else { if (attr === "opacity") { //为透明度时,执行 element.style.filter = "alpha(opacity:" + (iCurrent + iSpeed) + ")"; //IE element.style.opacity = (iCurrent + iSpeed) / 100; //标准 } else { //默认 element.style[attr] = iCurrent + iSpeed + "px"; } } }, 30); }
if (iCurrent === iTarget) {//结束运动 clearInterval(element.timer); if (func) {//有回调函数,才执行 func(); } }
function startMove(element, json, func) { var flag = true; //假设所有运动到达终点. clearInterval(element.timer); element.timer = setInterval(function () { for (var attr in json) { //1.取当前的属性值。 var iCurrent = 0; if (attr === "opacity") { //为透明度时执行。 iCurrent = Math.round(parseFloat(getStyle(element, attr)) * 100); } else { //默认情况 iCurrent = parseInt(getStyle(element, attr)); //实际样式大小 } //2.算运动速度,动画缓冲效果 var iSpeed = (json[attr] - iCurrent) / 10; //(目标值-当前值)/缩放系数=速度 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //速度取整 //3.未到达目标值时,执行代码 if (iCurrent != json[attr]) { flag = false; //终止条件 } if (attr === "opacity") { //为透明度时,执行 element.style.filter = "alpha(opacity:" + (iCurrent + iSpeed) + ")"; //IE element.style.opacity = (iCurrent + iSpeed) / 100; //标准 } else { //默认 element.style[attr] = iCurrent + iSpeed + "px"; } } //4. 运动终止,是否回调 if (flag) { clearInterval(element.timer); if (func) { func(); } } }, 30);
window.onload=function(){ var oBtn=document.getElementById('btn1'); var oDiv=document.getElementById('div1'); oBtn.onclick=function(){ startMove(oDiv,{width:102,height:200,opacity:100}); } }
startMove(element) | 运动 |
startMove(element,iTarget) | 匀速–>缓冲–>多物体 |
startMove(element,attr,iTargrt) | 任意值 |
startMove(element,attr,iTargrt,func) | 链式运动 |
startMove(element,json,func) | 多值(同时)–>完美运动框架 |
七、拓展
1. 弹性运动
速度+=(目标值-oDiv.offsetLeft)/5;
速度*=0.7;
2. 碰撞运动
function startMove(){ setInterval(function(){ var oDiv=document.getElementById('div1'); var l=oDiv.offsetLeft+iSpeedX; var t=oDiv.offsetTop+iSpeedY; if(t>=document.documentElement.clientHeight-oDiv.offsetHeight){ iSpeedY*=-1; t=document.documentElement.clientHeight-oDiv.offsetHeight }else if(t<=0){ iSpeedY*=-1; t=0; } if(l>=document.documentElement.clientWidth-oDiv.offsetWidth){ iSpeedX*=-1; l=document.documentElement.clientWidth-oDiv.offsetWidth }else if(l<=0){ iSpeedX*=-1; l=0; } oDiv.style.left=oDiv.offsetLeft+iSpeedX+'px'; oDiv.style.top=oDiv.offsetTop+iSpeedY+'px'; },30); }3. 碰撞重力拖拽
<script> window.onload=function(){ var oDiv=document.getElementById('div1'); var lastX=0; var lastY=0; oDiv.onmousedown=function(ev){ var oEvent=ev||event; var disX=oEvent.clientX-oDiv.offsetLeft; var disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function(ev){ var oEvent=ev||event; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; iSpeedX=l-lastX; iSpeedY=t-lastY; lastX=l; lastY=t; }; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; startMove(); }; clearInterval(timer); }; }; var timer=null; var iSpeedX=6; var iSpeedY=8; function startMove(){ clearInterval(timer); timer=setInterval(function(){ var oDiv=document.getElementById('div1'); iSpeedY+=3; var l=oDiv.offsetLeft+iSpeedX; var t=oDiv.offsetTop+iSpeedY; if(t>=document.documentElement.clientHeight-oDiv.offsetHeight){ iSpeedY*=-0.8; iSpeedX*=0.8; t=document.documentElement.clientHeight-oDiv.offsetHeight; }else if(t<=0){ iSpeedY*=-1; iSpeedX*=0.8; t=0; } if(l>=document.documentElement.clientWidth-oDiv.offsetWidth){ iSpeedX*=-0.8; l=document.documentElement.clientWidth-oDiv.offsetWidth; }else if(l<=0){ iSpeedX*=-0.8; l=0; } if(Math.abs(iSpeedX)<1){ iSpeedX=0; } if(Math.abs(iSpeedY)<1){ iSpeedY=0; } oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; },30); } </script>