В этой статье мы понимаем эффект прокрутки рекламы в режиме Pure JS.
Давайте сначала покажем готовый продукт:
Прежде всего, стиль веб -страницы:
#demo {founale: #fff; переполнение: скрыто; Граница: 1px пунктир #CCC; Ширина: 1280px; Высота: 200px; } #demo img {border: 3px solid #f2f2f2; } #indemo {float: Left; Ширина: 800%; } #demo1 {float: left; } #demo2 {float: left; }Макет следующим образом:
<div id = "demo"> <div id = "indemo"> <div id = "demo1"> <a href = "#"> <img src = "banner.jpg"/> </a> <a href = "#"> <img src = "banner2.jpg"/> </a> </div> div Id Id "/" div ID "/"/div Id "/"/Div Div ID "/"/Div Div ID "/> </Re> </div> <div ID"/"/> </Ref> </div> <div ID"/"/> </Ref> </div> <div ID.
Конкретная реализация JS:
<script> var speed = 10; var tab = document.getElementbyId ("demo"); var tab1 = document.getElementbyId ("demo1"); var tab2 = document.getElementbyId ("demo2"); tab2.innerhtml = tab1.innerhtml; function marquee () {if (tab2.offsetwidth-tab.scrollleft == 0) tab.scrollleft- = tab1.offsetwidth else {tab.scrollleft ++; }} var mymar = setInterval (marquee, speed); tab.onmouseover = function () {clearInterval (mymar)}; tab.onmouseout = function () {mymar = setInterval (marquee, speed)}; </script>Что отметить здесь:
Прокрутка представляет ширину страницы, спрятанной слева от прокрутки, когда страница использует полос прокрутки для прокрутки вправо.
Офтеат -типа - это видимая ширина объекта, которая завершает полосу прокрутки и равна краям, что будет изменяться с размером дисплея окна.
Метод setInterval () может вызовать функции или рассчитывать выражения в соответствии с указанными периодами (в миллисекундах). Метод setInterval () будет продолжать вызывать функцию до тех пор, пока не будет вызван ClearInterval () или окно не будет закрыто.
Легко понять, если вы понимаете эту конкретную реализацию.
Принцип реализации заключается в следующем: сначала скопируйте копию контента, который необходимо прокрутить. Когда содержимое, отображаемое Div справа, является той же шириной, что и содержимое, скрытое на левой тени, отображается содержимое, скрытое на левой тени родительского контейнера, так что отображается содержимое на левой тени, а содержимое, скрытое справа, повторно. Если содержимое на правой стороне отображается меньше, чем контент, скрытый с левой стороны, продолжайте говорить о родительском контейнере, который хочет двигаться влево, чтобы реализовать скрытую тень. Обратите внимание, что, поскольку два изображения расположены с левой стороны одновременно, когда правая сторона отображается наполовину, тень, скрытая на левой стороне, будет полностью отображена. Поскольку содержимое, отображаемое на правой стороне, такое же, как и содержимое на левой стороне, эффект прокрутки цикла достигается.
Эта плавная прокрутка достигается.
Приведенный выше код для реализации JS Smooth и Severse Scrolling Effects - это все контент, которым я поделился с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.