cari

Rumah >hujung hadapan web >tutorial js >js untuk mencapai pelbagai kesan gerakan pada kemahiran page_javascript yang sama

js untuk mencapai pelbagai kesan gerakan pada kemahiran page_javascript yang sama

WBOY
WBOYasal
2016-05-16 16:04:521156semak imbas

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;

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

speed = speed>0?Math.ceil(speed):Math.floor(speed);

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";
}

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);
}
}

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>

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk melaksanakan tab mudah dan kesan penukaran automatik dalam kemahiran js_javascriptArtikel seterusnya：Bagaimana untuk melaksanakan tab mudah dan kesan penukaran automatik dalam kemahiran js_javascript

Artikel berkaitan

Lihat lagi