Contoh -contoh dalam artikel ini berbagi kode untuk mengimplementasikan efek gulir JS yang mulus untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> gulir mulus </iteme> <tyle> #warp {width: 1200px; Tinggi: 300px; meluap: tersembunyi; Margin: 100px Auto 0; } #warp #con {width: 4000px; Tinggi: 300px; meluap: tersembunyi; } #warp #con #box1 {float: left; meluap: tersembunyi; } #warp #con #box2 {float: left; meluap: tersembunyi; } #warp img {float: left; Lebar: 200px; Tinggi: 300px; } </tyle> </head> <body> <Div id = "warp"> <div id = "con"> <div id = "box1"> <img src = "gambar/meinv1.jpg"> <img src = "gambar/meinv2.jpg"> <img src = "MeINV3.JP" MINV2.JPG "> <img src =" MeINV3.jpg "> <img src = "gambar/meinv5.jpg"> <img src = "gambar/meinv6.jpg"> </div> <div id = "box2"> </div> </div> </div> <script> var warp = document.getElementById ('warp'); var con = document.geteLementById ('con'); var box1 = document.geteLementById ('box1'); var box2 = document.geteLementById ('box2'); // box2.innerhtml = box1.innerHtml; var timer1 = null, x = 0; function scroll () {// scroll function box2.innerHtml = box1.innerHtml; timer1 = setInterval (function () {x ++; if (x> = box1.clientWidth) {x = 0; warp.scrollleft = x;} warp.scrollleft = x;}, 10)} scroll (); warp.onMouseEnter = function () {clearInterval (timer1); } warp.onmouseleave = function () {scroll (); } </script> </body> </html>Gagasan utama dari efek ini adalah bahwa lebar bagian konten dari gambar harus jauh lebih besar dari lebar area yang akan ditampilkan, sehingga bilah gulir akan muncul. Salin konten dari grup gambar sebelumnya untuk membuatnya menggulir secara mulus dalam efeknya. Silakan merujuk ke kode untuk detailnya.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.