Dieses Mal zeige ich Ihnen, wie Sie den Animationseffekt des Mausreaktionspuffers erzielen? Was sind die Vorsichtsmaßnahmen , um den Mausreaktionspuffer-Animationseffekt zu implementieren? Das Folgende ist ein praktischer Fall, schauen wir uns das an.
Werfen wir zunächst einen Blick auf den Laufeffekt:
Der spezifische Code lautet wie 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>Ich glaube dir Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Implementierung eines auf die Maus reagierenden Taobao-Animationseffekts
Implementierung eines auf die Maus reagierenden Transparenzverlaufseffekts
So laden Sie automatisch mehr Inhalte, wenn die Bildlaufleiste nach unten gleitet
Das obige ist der detaillierte Inhalt vonWie implementiert man den Animationseffekt des Mausantwortpuffers?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
