js untuk mencapai pelbagai kesan gerakan pada kemahiran page

js untuk mencapai pelbagai kesan gerakan pada kemahiran page_javascript yang sama

WBOY

Lepaskan： 2016-05-16 16:04:52

asal

1170 orang telah melayarinya

Contoh dalam artikel ini menerangkan kaedah menggunakan js untuk mencapai berbilang kesan gerakan pada halaman yang sama. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Prinsip pelaksanaan adalah untuk menambah peristiwa pada lima elemen ini dalam satu gelung apabila membuat panggilan. Ambil perhatian bahawa pemasa untuk setiap elemen perlu diasingkan.

Mata 1:

var speed = (target - obj.offsetWidth)/8;

Salin selepas log masuk

Kesan gerakan penampan, sangat cepat pada mulanya, kemudian perlahan dan perlahan sehingga ia berhenti

speed = speed>0&#63;Math.ceil(speed):Math.floor(speed);

Salin selepas log masuk

Jika kelajuan lebih daripada 0, bulatkan ke atas, jika kelajuan kurang daripada 0, bulatkan ke bawah.

Mata 2:

if(obj.offsetWidth == target){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth+speed+"px";
}

Salin selepas log masuk

Bandingkan lebar elemen dengan nilai sasaran Jika ia sama, tutup pemasa Jika tidak, lebarnya terus meningkat.

Mata tiga:

for(i=0; i<runs_li.length; i++){
runs_li[i].timer = null;
runs_li[i].onmouseover = function(){
startrun(this,300);
}
runs_li[i].onmouseout = function(){
startrun(this,80);
}
}

Salin selepas log masuk

Tambah atribut pemasanya sendiri dan acara tetikus pada setiap elemen, dan panggil fungsi gerakan dalam acara tetikus.

Akhir sekali, tambah kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0;}
#runs li{width:80px; height:80px; background:#06c; list-style:none;
position:absolute; left:0;}
</style>
<script>
window.onload = function(){
 var runs = document.getElementById("runs");
 var runs_li = runs.getElementsByTagName("li");
 var i=0;
 for(i=0; i<runs_li.length; i++){
 runs_li[i].timer = null;
 runs_li[i].onmouseover = function(){
  startrun(this,300);
 }
 runs_li[i].onmouseout = function(){
  startrun(this,80);
 }
 }
}
function startrun(obj,target){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 var speed = (target - obj.offsetWidth)/8;
 speed = speed>0&#63;Math.ceil(speed):Math.floor(speed);
 
 if(obj.offsetWidth == target){
  clearInterval(obj.timer);
 }else{
  obj.style.width = obj.offsetWidth+speed+"px";
 }
 document.title = obj.offsetWidth + ',' + target;
 },30);
}
</script>
</head>
<body>
<ul id="runs">
 <li style="top:0">1</li>
 <li style="top:90px;">2</li>
 <li style="top:180px;">3</li>
 <li style="top:270px;">4</li>
 <li style="top:360px;">5</li>
</ul>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.