Der Inhalt dieses Artikels befasst sich mit dem durch Javascript Uniform Motion erzielten Sidebar-Sharing-Effekt. Ich hoffe, dass er für Sie hilfreich ist.
Verwenden Sie offsetLeft (den Abstand des Objekts von links) plus eine feste Geschwindigkeit.
Verwenden Sie den Timer setInterval und clearInterval
Bestimmen Sie, ob die Laufgeschwindigkeit positiv oder negativ ist, basierend darauf, ob die aktuelle Position zur Zielposition a ist positiver oder negativer Wert negativer Wert.
<!DOCTYPE html>
<html>
<head>
<title>用运动做一个侧边栏分享</title>
<style>
#div1{
width: 150px;
height: 200px;
background: #0f0;
position: absolute;
left: -150px;
}
#div1 span{
position: absolute;
width: 20px;
height: 60px;
line-height: 20px;
background: #00f;
right: -20px;
top: 70px;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onmouseover=function(){
startMove(10,0);
}
oDiv.onmouseout=function(){
startMove(-10,-150);
}
}
var timer=null;
function startMove(speed,iTarget){
var oDiv=document.getElementById("div1");
clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==iTarget){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+"px";
}
},30)
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>Wenn wir einen Code schreiben, sollten wir eine Testoptimierung durchführen. Im Test gibt es keine Kompatibilitätsprobleme. Die gekapselte Bewegungsfunktion hat derzeit zwei Parameter.
Wenn wir beispielsweise ein Taxi nehmen, können wir dem Fahrer das Ziel mitteilen, aber wir müssen dem Fahrer nicht sagen, wie schnell er zum Ziel kommt, sodass wir den Parameter auf einen Parameter vereinfachen können. Der spezifische Code lautet wie folgt.
<!DOCTYPE html>
<html>
<head>
<title>用运动做一个侧边栏分享</title>
<style>
#div1{
width: 150px;
height: 200px;
background: #0f0;
position: absolute;
left: -150px;
}
#div1 span{
position: absolute;
width: 20px;
height: 60px;
line-height: 20px;
background: #00f;
right: -20px;
top: 70px;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onmouseover=function(){
startMove(0);
}
oDiv.onmouseout=function(){
startMove(-150);
}
}
var timer=null;
function startMove(iTarget){
var oDiv=document.getElementById("div1");
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(oDiv.offsetLeft>iTarget){
speed=-10;
}else{
speed=10;
}
if(oDiv.offsetLeft==iTarget){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+"px";
}
},30)
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>Verwandte Empfehlungen:
Detaillierte Erläuterung der Javascript-Implementierung dynamischer Sidebar-Beispiele
Natives Javascript erreicht einheitliche Bewegungsanimationseffekte_Javascript-Fähigkeiten
Das obige ist der detaillierte Inhalt vonEinheitliche JavaScript-Bewegung, um einen Sidebar-Sharing-Effekt zu erzielen (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
