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

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

WBOY

Lepaskan： 2016-05-16 15:21:13

asal

1300 orang telah melayarinya

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

Salin selepas log masuk

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
{
 一般
}

Salin selepas log masuk

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>

Salin selepas log masuk

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.