php响应鼠标,鼠标响应缓冲动画效果如何实现？

这次给大家带来鼠标响应缓冲动画效果如何实现？实现鼠标响应缓冲动画效果的注意事项有哪些，下面就是实战案例，一起来看一下。

先来看看运行效果：

具体代码如下：

js动画-缓冲动画

* {

margin: 0;

padding: 0;

font-family:"微软雅黑"

}

#box{

height:100px;

width:100px;

background-color:#0099CC;

margin-top:200px;

position:relative;

/*速速、缓冲变化*/

left:-100px;

}

span{

display:block;

color:blue;

width:25px;

height:100px;

background-color:#FFFF99;

position:absolute;

left:100px;

}

移动

window.οnlοad=function(){

var p1=document.getElementById("box");

p1.οnmοuseοver=function(){

startMove(0);

}

p1.οnmοuseοut=function(){

startMove(-100);

}

}

var timer=null;

function startMove(itarget){

clearInterval(timer);

var p1=document.getElementById("box");

timer=setInterval(function(){

var speed=(itarget-p1.offsetLeft)/20;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(p1.offsetLeft==itarget){

clearInterval(timer);

}else{

p1.style.left=p1.offsetLeft+speed+"px";

}

},30)

}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：