Прерывистый и бесшовный эффект прокрутки (эффект записи с помощью GIF не очень хорош, если вам интересно, вы можете вниз по коду), конкретный контент заключается в следующем
Код:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Teal> Seamless Scroll </title> <style> *{Margin: 0; Padding: 0;} .box {width: 500px; Height: 400px; Margin: 40px auto; found: #ccc; .block {Положение: относительно; ширина: 500px; высота: 400px; переполнение: скрыто;} .item {height: 40px; фон: красный; цвет: #fff; line-high Function (json) {var objscroll = document.getElementbyId (json.id); objscroll.scrolltop = 0; setInterval (function () {scrolling ()}, 30); ClearInterval (Timer); window.onload = function () {// on: extmittent прокрутка/бесшовная высота прокрутки: прерывистый прокрутки ({on: true, id: 'block'}); Scrollup ({id: 'block2', высота: 120}); } </script> </head> <body> <div> <div id = "block"> <div> 1 бесшовный прокруток </div> <div> 2 бесшовного прокрутки </div> <div> 3 бесшовного прокрутки </div> <div> 4 бесшовного прокрутки </div> <div> 5 Seamless Scroll </div> Seamless Scroll </div> </div> </div> </div> <dip> </div> <dip> </div> </div> <dip> </div> seamless seamless </div>. 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 Прокрутка </div> <div> 1 прерывистый прокруток </div> <div> 2 прерывистый прокруток </div> <div> 3 прерывистый прокруток </div> <div> 4 прерывистого прокрутки </div> <div> 5 Intermittent Scroll </div> <div> 6 -intermittent scroll </div> <div> 7 intermittent scroll </div> 8 Divmot </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>Примечание:
1. Блок коробки должен быть переполненным и скрытым: переполнение: скрыто
2. Есть две функции: прерывистая прокрутка/бесшовная прокрутка
3. Сначала скопируйте кусок точно такого же кода и плавно прокрутите: таймер выполнения продолжает увеличивать значение Scrolltop. Когда значение Scrolltop больше высоты коробки, установите Scrolltop на 0 и начните заново. Прерывистая прокрутка добавляется на этой основе, Settimeout выполняется периодически, и указанная высота останавливается, когда приходит Scrolltop.
4. Вопрос: setInterval (function () {scrolling ()}, 30); В коде его можно выполнить, написав таким образом, setInterval ('scolling ()', 30); Это не сработает. Есть ли какое -нибудь отличное руководство? В чем разница между ними? Что такое механизм?
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.