Home  >  Article  >  Web Front-end  >  Mouse response buffer animation effect implemented by jQuery

Mouse response buffer animation effect implemented by jQuery

亚连
亚连Original
2018-06-05 17:45:191700browse

This article mainly introduces the mouse response buffer animation effect implemented by jQuery, involving jQuery event response, numerical operation and dynamic operation of page elements. Friends who need it can refer to it

This article describes the jQuery example Implemented mouse response buffer animation effect. Share it with everyone for your reference, the details are as follows:

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>

Above I compiled it for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to set global variables in vue2? (Detailed tutorial)

Set global variables or data methods according to vue (Detailed tutorial)

How to implement string splicing in JS Function (extends String.prototype.format)

The above is the detailed content of Mouse response buffer animation effect implemented by jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn