В этой статье мы понимаем эффект прокатки рекламы в режиме 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 Marquee () {if (tab2.offsetwidth-tab.scrollleft == 0) tab.scrollleft- = tab1.offsetwidthelse {tab.scrollleft ++; }} var mymar = setInterval (marquee, speed); tab.onmouseover = function () {clearInterval (mymar)}; tab.onmouseout = function () {mymar = setInterval (marquee, speed)}; </script>Что отметить здесь:
Прокрутка представляет ширину страницы, спрятанной слева от прокрутки, когда страница использует полос прокрутки для прокрутки вправо.
Офтеат -типа - это видимая ширина объекта, которая завершает полосу прокрутки и равна краям, что будет изменяться с размером дисплея окна.
Метод setInterval () может вызвать функцию или рассчитать выражение в соответствии с указанным периодом (в миллисекундах). Метод setInterval () будет продолжать вызывать функцию до тех пор, пока не будет вызван ClearInterval () или окно не будет закрыто.
Легко понять, если вы понимаете эту конкретную реализацию.
Принцип реализации заключается в следующем: сначала скопируйте копию контента, который необходимо прокрутить. Когда содержимое, отображаемое Div справа, является той же шириной, что и содержимое, скрытое на левой тени, отображается содержимое, скрытое на левой тени родительского контейнера, так что отображается содержимое на левой тени, а содержимое, скрытое справа, повторно. Если содержимое на правой стороне отображается меньше, чем контент, скрытый с левой стороны, продолжайте говорить, что родительский контейнер хочет двигаться влево, чтобы достичь укрытия. Обратите внимание, что, поскольку два изображения расположены с левой стороны одновременно, когда правая сторона отображается наполовину, тень, скрытая на левой стороне, будет полностью отображена. Поскольку содержимое, отображаемое на правой стороне, такое же, как и содержимое на левой стороне, эффект прокрутки цикла достигается.
Эта плавная прокрутка достигается.
Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.