Efek pengguliran intermiten dan mulus (efek perekaman dengan GIF tidak terlalu baik, jika Anda tertarik, Anda dapat menurunkan kode), konten spesifiknya adalah sebagai berikut
Kode:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> gulir mulus </itement> <tyle> *{margin: 0; padding: 0;} .box {width: 500px; tinggi: 400px; margin: 40px auto auto {width: 500px; tinggi: 400px; margin: 40px auto auto; relative;width: 500px;height: 400px;overflow: hidden;} .item{height: 40px;background: red;color: #fff;line-height: 40px;text-align: center;} .item:nth-child(2n){background: #000} </style> <script> var scrollUp=(function(){ return function(json){ var objscroll = document.getElementById (json.id); objscroll.scrolltop = 0;} else {objscroll.scrolltop ++ setInval (function () {scrolling ()}, 30); ClearInter (Timer); window.onload = function () {// on: scroll intermittent/tinggi gulir mulus: scrollup intermittent ({on: true, id: 'block'}); scrollup ({id: 'block2', tinggi: 120}); } </script></head><body> <div> <div id="block"> <div>1 Seamless scroll</div> <div>2 Seamless scroll</div> <div>3 Seamless scroll</div> <div>4 Seamless scroll</div> <div>5 Seamless scroll</div> <div>6 Seamless scroll</div> <div>7 Seamless scroll</div> <div>8 Seamless scroll</div> <div>9 Seamless scroll</div> <div>10 Seamless scroll</div> <div>11 seamless scroll</div> <div>12 seamless scroll</div> <div>13 seamless scroll</div> <div>14 seamless scroll</div> <div>15 seamless scroll</div> </div> </div> <div> <div id="block2"> <div>1 intermittent scroll</div> <div>1 intermittent scroll</div> <div>2 intermittent scroll</div> <div>3 intermittent scroll</div> <div>4 intermittent scroll</div> <div>5 intermittent scroll</div> <div>6 intermittent scroll</div> <div>7 intermittent scroll</div> <div>8 intermittent scroll</div> <div>9 intermittent scroll</div> <div>10 intermittent scroll</div> <div>11 intermittent scroll</div> <div>12 intermittent scroll</div> <div>13 intermittent scroll</div> <div>14 intermittent scroll</div> <div>15 intermittent scroll</div> </div> </div> </div> </body> </html>Catatan:
1. Blok kotak harus menjadi CSS Overflow dan Sembunyikan: Overflow: Tersembunyi
2. Ada dua fungsi: pengguliran/pengguliran yang selaras
3. Salin sepotong kode yang persis sama dan gulir dengan mulus: timer eksekusi terus meningkatkan nilai scrolltop. Ketika nilai scrolltop lebih besar dari ketinggian kotak, atur scrolltop ke 0 dan mulai lagi. Gulir yang terputus -putus ditambahkan atas dasar ini, SetTimeout dieksekusi sebentar -sebentar, dan ketinggian yang ditentukan berhenti ketika scrolltop tiba.
4. Pertanyaan: setInterval (function () {scrolling ()}, 30); Dalam kode, dapat dieksekusi dengan menulis dengan cara ini, setInterval ('scrolling ()', 30); Ini tidak akan berhasil. Apakah ada bimbingan master yang hebat? Apa perbedaan antara keduanya? Apa mekanismenya?
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.