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 to find the maximum and minimum value of array elements in Java
What are the PHP visual Chinese development tools?
How to insert video in html
The running environment of java program
Yiou Exchange app official website download address
How to modify the text in the picture
Introduction to xmpp protocol
What are the levels of mobile user star ratings?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
