cari

Rumah >hujung hadapan web >tutorial js >Ringkasan mata pengetahuan berkaitan gerakan JS (dengan contoh gerakan elastik)_kemahiran javascript

Ringkasan mata pengetahuan berkaitan gerakan JS (dengan contoh gerakan elastik)_kemahiran javascript

WBOY
WBOYasal
2016-05-16 15:21:131328semak imbas

Artikel ini meringkaskan mata pengetahuan berkaitan sukan JS. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

1. Semua dalam bingkai gerakan berbilang objek tidak boleh dikongsi

Kekerapan output 2.document.title tidak boleh terlalu tinggi

3 Cuba elakkan menulis perpuluhan semasa menulis JS, kerana bahagian dalam komputer disimulasikan, sebenarnya tidak disimpan

Contohnya: 0.07*100 bukan 7 dalam operasi JS

var a=3;
var b=3.00000000000000000001;
alert(a=b);

Hasil keluaran adalah benar

4. Apabila menulis program, fikirkan tentang umum dahulu dan kemudian khusus Apabila menulis program, mula-mula hilangkan yang istimewa dan kemudian tulis yang umum 

if(特殊1)
{}
else if(特殊2)
{}
else
{
 一般
}

5. Untuk tatasusunan, anda boleh menggunakan sama ada gelung for atau gelung for..in Kerana gelung for lebih boleh dikawal, lebih baik menggunakan gelung for

Untuk objek (json), anda hanya boleh gunakan untuk..dalam gelung

6. Prestasi menulis *{margin:0; padding:0;} dalam CSS tidak begitu baik

7. Penukaran reka letak, mula-mula tetapkan nilai kiri dan atas ​​​​untuk setiap elemen, kemudian tetapkan mutlak untuk setiap kedudukan elemen dan kosongkan jidar

8. Akan ada jeda apabila menggunakan UL untuk bersenam dalam IE7 Pada masa ini, anda boleh mencuba menggunakan DIV

9. Pertimbangkan faktor geseran iSpeed*0.95 (saiz perpuluhan bergantung pada saiz geseran)

10. Pecutan, semakin jauh dari sasaran, semakin besar pecutan, dan semakin dekat dengan sasaran, semakin kecil (iTarget-obj.offsetLeft)/50

11. Gabungan pecutan dan geseran yang lebih baik ialah 5 dan 0.7, iaitu iSpeed ​​​​= (iTarget-obj.offsetLeft)/5;

12. Apabila ada masalah dengan program, fikirkan mengapa masalah itu berlaku

13. Gerakan elastik tidak boleh digunakan apabila gaya tidak boleh melepasi sempadan

14. Keadaan pemberhentian gerakan elastik: jarak terlalu dekat dan kelajuan terlalu kecil

15. Analisis mesti dilakukan dengan berhati-hati, kerana gaya akan secara automatik mengabaikan perpuluhan Oleh itu, untuk mengelakkan perpuluhan yang hilang daripada menambah, anda boleh menetapkan pembolehubah untuk menyimpannya dan kemudian menetapkannya kepada gaya. obj.style.left=left "px";

Lampiran: contoh pergerakan elastik JavaScript

Prinsip gerakan: gerakan pecutan, gerakan nyahpecutan, gerakan geseran

Kod adalah seperti berikut: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
</style>
<script>
window.onload = function()
{
 var oBtn = document.getElementById('btn1');
 var oDiv = document.getElementById('div1');
 oBtn.onclick = function()
 {
  startMove(oDiv, 300);
 };
};
var iSpeed = 0;
var left = 0;
function startMove(obj, iTarget)
{
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
  iSpeed += (iTarget - obj.offsetLeft)/5;
  iSpeed *= 0.7;
  left += iSpeed;
  if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
   clearInterval(obj.timer);
   obj.style.left = iTarget + 'px';
  }else{
   obj.style.left = obj.offsetLeft + iSpeed + 'px';
  }
 }, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="运动" />
<div id="div1"></div>
<div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; ">
</div>
</body>
</html>
Untuk lebih banyak kandungan yang berkaitan dengan kesan gerakan JavaScript, sila lihat topik khas di tapak ini: "

Ringkasan kesan dan teknik gerakan JavaScript"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

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：Berdasarkan kod JavaScript untuk melaksanakan tetapan sebagai halaman utama dan menambah pada kegemaran yang serasi dengan pelbagai kemahiran pelayar_javascriptArtikel seterusnya：Berdasarkan kod JavaScript untuk melaksanakan tetapan sebagai halaman utama dan menambah pada kegemaran yang serasi dengan pelbagai kemahiran pelayar_javascript

Artikel berkaitan

Lihat lagi