masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah hujung hadapan web tutorial js JS实现缓冲运动作用详解

JS实现缓冲运动作用详解

php中世界最好的语言
php中世界最好的语言
May 14, 2018 pm 02:29 PM
javascript kesan Penjelasan terperinci

这次给大家带来JS实现缓冲运动作用详解，JS实现缓冲运动的注意事项有哪些，下面就是实战案例，一起来看一下。

缓冲需要用到数值取整，向上取整:Math.ceil()  向下取整Math.floor()

移动的速度慢慢减慢的效果，移动速度=(终点位置 - 当前位置) / 一个数

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

<!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>JS缓冲运动</title>

<style>

#p{

  width:150px;

  height:150px;

  background:#0C6;

  position:absolute;

  left:0;

  top:50px;

}

#p2{

  background:#000;

  height:600px;

  position:absolute;

  left:500px;

  width:2px;

}

</style>

</head>

<script>

var speed;

var time;

window.onload = function(){

  var btn = document.getElementById('btn');

  btn.onclick = function(){

    speed = 0;

    move(500);

  };

  btn2.onclick = function(){

    speed = 0;

    move(0);

  };

};

function move(e){

  var p = document.getElementById('p');

  clearInterval(time);

  time = setInterval(function(){

    //改变位置，如果向左则e==500， 向上取整， 否则向右，向下取整，速度=(终点位置 - 当前位置)/一个数

    e==500 ? speed = Math.ceil((e-(p.offsetLeft))/30):speed = Math.floor((e-(p.offsetLeft))/30)

    if (e <= p.style.left){//达到，关闭定时器

      clearInterval(time);

    }

    else

    {

      p.style.left = p.offsetLeft+speed+&#39;px&#39;;

    }

  },30);

};

</script>

<body>

<input type="button" value="向右运动" id="btn" />

<input type="button" value="向左运动" id="btn2" />

<p id = "p">

</p>

<p id = "p2">

</p>

</body>

</html>

Salin selepas log masuk

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

ES6实现全屏滚动插件步骤详解

VueJs中V-bind指令怎样使用

Atas ialah kandungan terperinci JS实现缓冲运动作用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
4 minggu yang lalu By DDD
R.E.P.O. Simpan Fail Lokasi: Di ​​manakah & bagaimana untuk melindunginya?
1 bulan yang lalu By DDD
R.E.P.O. Tetapan grafik terbaik
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?
7385
15
Tutorial Java
1629
14
Tutorial CakePHP
1357
52
Tutorial Laravel
1267
25
Tutorial PHP
1216
29
Tunjukkan Lagi
Related knowledge
Penjelasan terperinci tentang mendapatkan hak pentadbir dalam Win11 Penjelasan terperinci tentang mendapatkan hak pentadbir dalam Win11 Mar 08, 2024 pm 03:06 PM

Sistem pengendalian Windows ialah salah satu sistem pengendalian yang paling popular di dunia, dan versi baharunya Win11 telah menarik perhatian ramai. Dalam sistem Win11, mendapatkan hak pentadbir adalah operasi penting Hak pentadbir membolehkan pengguna melakukan lebih banyak operasi dan tetapan pada sistem. Artikel ini akan memperkenalkan secara terperinci cara mendapatkan kebenaran pentadbir dalam sistem Win11 dan cara mengurus kebenaran dengan berkesan. Dalam sistem Win11, hak pentadbir dibahagikan kepada dua jenis: pentadbir tempatan dan pentadbir domain. Pentadbir tempatan mempunyai hak pentadbiran penuh ke atas komputer tempatan

Penjelasan terperinci tentang operasi bahagian dalam Oracle SQL Penjelasan terperinci tentang operasi bahagian dalam Oracle SQL Mar 10, 2024 am 09:51 AM

Penjelasan terperinci tentang operasi bahagi dalam OracleSQL Dalam OracleSQL, operasi bahagi ialah operasi matematik yang biasa dan penting, digunakan untuk mengira hasil pembahagian dua nombor. Bahagian sering digunakan dalam pertanyaan pangkalan data, jadi memahami operasi bahagian dan penggunaannya dalam OracleSQL adalah salah satu kemahiran penting untuk pembangun pangkalan data. Artikel ini akan membincangkan pengetahuan berkaitan operasi bahagian dalam OracleSQL secara terperinci dan menyediakan contoh kod khusus untuk rujukan pembaca. 1. Operasi bahagian dalam OracleSQL

Analisis fungsi dan prinsip nohup Analisis fungsi dan prinsip nohup Mar 25, 2024 pm 03:24 PM

Analisis peranan dan prinsip nohup Dalam sistem pengendalian seperti Unix dan Unix, nohup ialah arahan yang biasa digunakan yang digunakan untuk menjalankan arahan di latar belakang Walaupun pengguna keluar dari sesi semasa atau menutup tetingkap terminal, arahan itu boleh masih terus dilaksanakan. Dalam artikel ini, kami akan menganalisis fungsi dan prinsip arahan nohup secara terperinci. 1. Peranan nohup: Menjalankan arahan di latar belakang: Melalui arahan nohup, kita boleh membiarkan arahan yang berjalan lama terus dilaksanakan di latar belakang tanpa terjejas oleh pengguna yang keluar dari sesi terminal. Ini perlu dijalankan

Fahami peranan dan penggunaan Linux DTS Fahami peranan dan penggunaan Linux DTS Mar 01, 2024 am 10:42 AM

Memahami peranan dan penggunaan LinuxDTS Dalam pembangunan sistem Linux terbenam, Device Tree (DeviceTree, singkatan DTS) ialah struktur data yang menerangkan peranti perkakasan dan hubungan sambungan dan atributnya dalam sistem. Pokok peranti membolehkan kernel Linux berjalan secara fleksibel pada platform perkakasan yang berbeza tanpa mengubah suai kernel. Dalam artikel ini, fungsi dan penggunaan LinuxDTS akan diperkenalkan, dan contoh kod khusus akan disediakan untuk membantu pembaca memahami dengan lebih baik. 1. Peranan pokok peranti pokok peranti

Terokai kepentingan dan peranan define function dalam PHP Terokai kepentingan dan peranan define function dalam PHP Mar 19, 2024 pm 12:12 PM

Kepentingan dan peranan fungsi define dalam PHP 1. Pengenalan asas kepada fungsi define Dalam PHP, fungsi define ialah fungsi utama yang digunakan untuk menentukan pemalar tidak akan mengubah nilainya semasa menjalankan program. Pemalar yang ditakrifkan menggunakan fungsi define boleh diakses di seluruh skrip dan bersifat global. 2. Sintaks fungsi define Sintaks asas fungsi define adalah seperti berikut: define("constant name","constant value&qu

Penjelasan terperinci tentang peranan dan penggunaan pengendali modulo PHP Penjelasan terperinci tentang peranan dan penggunaan pengendali modulo PHP Mar 19, 2024 pm 04:33 PM

Operator modulo (%) dalam PHP digunakan untuk mendapatkan baki pembahagian dua nombor. Dalam artikel ini, kami akan membincangkan peranan dan penggunaan pengendali modulo secara terperinci, dan memberikan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik. 1. Peranan pengendali modulo Dalam matematik, apabila kita membahagi integer dengan integer lain, kita mendapat hasil bagi dan baki. Sebagai contoh, apabila kita membahagi 10 dengan 3, hasil bahagi ialah 3 dan selebihnya ialah 1. Operator modulo digunakan untuk mendapatkan baki ini. 2. Penggunaan operator modulo Dalam PHP, gunakan simbol % untuk mewakili modulus

Penjelasan terperinci tentang fungsi sistem panggilan sistem linux(). Penjelasan terperinci tentang fungsi sistem panggilan sistem linux(). Feb 22, 2024 pm 08:21 PM

Penjelasan terperinci tentang fungsi sistem panggilan sistem Linux() Panggilan sistem ialah bahagian yang sangat penting dalam sistem pengendalian Linux Ia menyediakan cara untuk berinteraksi dengan kernel sistem. Antaranya, fungsi system() adalah salah satu fungsi panggilan sistem yang biasa digunakan. Artikel ini akan memperkenalkan penggunaan fungsi system() secara terperinci dan memberikan contoh kod yang sepadan. Konsep Asas Panggilan Sistem Panggilan sistem ialah satu cara untuk atur cara pengguna berinteraksi dengan kernel sistem pengendalian. Program pengguna meminta sistem pengendalian dengan memanggil fungsi panggilan sistem

PHP digunakan untuk apa? Terokai peranan dan fungsi PHP PHP digunakan untuk apa? Terokai peranan dan fungsi PHP Mar 24, 2024 am 11:39 AM

PHP ialah bahasa skrip bahagian pelayan yang digunakan secara meluas dalam pembangunan web Fungsi utamanya adalah untuk menjana kandungan web yang dinamik Apabila digabungkan dengan HTML, ia boleh mencipta halaman web yang kaya dan berwarna-warni. PHP berkuasa Ia boleh melaksanakan pelbagai operasi pangkalan data, operasi fail, pemprosesan borang dan tugas lain, menyediakan interaktiviti dan fungsi yang berkuasa untuk tapak web. Dalam artikel berikut, kami akan meneroka lebih lanjut peranan dan fungsi PHP, dengan contoh kod terperinci. Mula-mula, mari kita lihat penggunaan biasa PHP: penjanaan halaman web dinamik: P

See all articles