cari

Rumah  >  Artikel  >  hujung hadapan web  >  Kaedah pelaksanaan mudah kesan gerakan elastik dalam kemahiran javascript_javascript

Kaedah pelaksanaan mudah kesan gerakan elastik dalam kemahiran javascript_javascript

WBOY
WBOYasal
2016-05-16 15:20:541445semak imbas

Contoh dalam artikel ini menerangkan kaedah pelaksanaan mudah kesan gerakan elastik JavaScript. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Prinsip gerakan kenyal: gerakan pecutan, gerakan nyahpecutan, gerakan geseran

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod contoh 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：js melaksanakan enkapsulasi berorientasikan objek bagi kemahiran requests_javascript ajaxArtikel seterusnya：js melaksanakan enkapsulasi berorientasikan objek bagi kemahiran requests_javascript ajax

Artikel berkaitan

Lihat lagi