This time I will show you how to achieve the mouse response buffer animation effect? What are the precautions to achieve the mouse response buffer animation effect? The following is a practical case, let’s take a look.
Let’s take a look at the running effect first:
The specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>js动画-缓冲动画</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<style>
* {
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;
}
</style>
</head>
<body>
<p id="box">
<span>移动</span>
</p>
<script>
window.onload=function(){
var p1=document.getElementById("box");
p1.onmouseover=function(){
startMove(0);
}
p1.onmouseout=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)
}
</script>
</body>
</html>I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!
Recommended reading:
The implementation of mouse-responsive Taobao animation effect
The implementation of mouse-responsive transparency gradient effect
How to automatically load more content when the scroll bar slides to the bottom
The above is the detailed content of How to implement mouse response buffer animation effect?. For more information, please follow other related articles on the PHP Chinese website!
How about n5095 processor
How much is Dimensity 8200 equal to Snapdragon?
The difference between lightweight application servers and cloud servers
How to solve err_connection_reset
js method to delete node
What software is podcasting?
Windows cannot access the specified device path or file solution
Linux adds update source method
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
