Heim >Web-Frontend >js-Tutorial >Von jQuery implementierter Maus-Antwortpuffer-Animationseffekt
In diesem Artikel wird hauptsächlich der von jQuery implementierte Mausantwortpuffer-Animationseffekt vorgestellt, der die jQuery-Ereignisantwort, die numerische Operation und die dynamische Operation von Seitenelementen umfasst.
Dieser Artikel beschreibt das jQuery-Beispiel Animationseffekt für den Maus-Antwortpuffer implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Werfen wir zunächst einen Blick auf den Laufeffekt:
Der spezifische Code lautet wie folgt folgt:
<!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>oben habe ich es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
Wie lege ich globale Variablen in vue2 fest? (Detailliertes Tutorial)
Globale Variablen oder Datenmethoden gemäß Vue festlegen (Detailliertes Tutorial)
So implementieren Sie String-Splicing in JS Function ( erweitert String.prototype.format)
Das obige ist der detaillierte Inhalt vonVon jQuery implementierter Maus-Antwortpuffer-Animationseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!