摘要：
如下效果，下面的5个元素，随便一个，鼠标移上去透明度渐渐增加，鼠标移出，透明度渐渐减小。效果预览：12345要点一：var speed = 0; if(target>obj.alpha){ speed = 5; }else{ speed = -5; }根据目标值和当时值的对比，来决定是正向还是负向速度。要点二：for(i=0; i<runs_li.length; i++){ runs_li[i].timer = null; runs_li[i].alpha = 30; runs_li[i].onmouseover = function(){ startrun(this,100); 阅读全文
摘要：
如图，有五个元素，给他们都加上运动效果。实现原理，就是在调用的时候，给这五个元素，循环加上事件。需要注意的是，每个元素的定时器需要分开。要点一：var speed = (target - obj.offsetWidth)/8; 缓冲运动效果，一开始速度很快，然后越来越慢，直到停止 speed = speed>0?Math.ceil(speed):Math.floor(speed); 如果速度大于0，则向上取整，如果速度小于0，则向下取整。要点二：if(obj.offsetWidth == target){ clearInterval(obj.timer); }else{ obj.styl 阅读全文
摘要：
如图，一开始元素的透明度是30，鼠标移上的时候，透明度慢慢增加，到透明度100停止。鼠标移出，透明度慢慢减少，减少到30.要点一：因为无法直接获取和改变透明度的值，可以把透明度值赋给一个变量，让变量变化，最后把变量的值再赋给元素的透明值。var alpha=30;要点二：判断目标值和目前透明值，来判定是正向速度还是负向速度。if(target > alpha){ speed = 2; }else{ speed = -2; } 要点三：如果透明值达到目标值，关掉定时器，否则透明值继续变化。最后把值赋给元素，因为透明度有兼容问题,所以要写上两个写法。 if(alpha == target){ 阅读全文
摘要：
如下图，点击向右，方块向右移动，点击向左，方块向左移动。可以用setInterval来实现过多长时间，div移动多长的距离来实现运动效果。要点一：如果元素的左边距离小于目标距离，则是正向移动，否则是负向移动if(run.offsetLeft <target){speed = 2;}else{speed = -2;}要点二：如果元素的左边距离等于目标距离，停止定时器，否则，元素的左边距离等于现在的左边距离加上速度值。if(run.offsetLeft ==target){clearInterval(timer);}else{run.style.left = run.offsetLeft + 阅读全文