Заявление: демонстрация опирается на учебное заведение и очень благодарна за эту структуру обучения. Без лишних слов, теперь мы начнем менять производство демонстрации.
Прежде всего, в процессе обучения переднего времени мы должны изучить изображения каруселей, поэтому для более эффективного реализации различных изображений каруселей инкапсулируется структура движения.
function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr];//In order to obtain the attribute value under IE}else{ return window.getComputedStyle(obj,null)[attr];//In order to obtain the attribute value under W3C browser}}function animate(obj,json){ ClearInterval (obj.timer); obj.timer = setInterval (function () {var flag = true; var current = 0; for (var attr in json) {if (attr == 'непрозрачность') {current = parseint (getStyle (obj, attr)*100);} else {current = parseint (getStyle (obj, attr); Math.ceil (step): math.floor (step); + ')'; clearInterval (obj.timer);Эта структура совместима с различными браузерами и позволяет передавать такие свойства, как непрозрачность и z-индекс. Конечно, общие свойства, такие как ширина, высота, слева, справа. С этой структурой вы можете добиться отличных результатов. Итак, теперь мы начинаем делать демонстрацию официально.
Во -первых, производство index.html.
<div id = "box"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div>
Производство index.html очень проста. Мы вставим изображение как фоновое изображение LI в JavaScript. После этого мы настраиваем стиль CSS.
*{маржа: 0px; Заполнение: 0px; } #box {width: 1300px; Высота: 400px; Маржа: 100px Auto; переполнение: скрыто; } #box ul {height: 400px; Ширина: 1300px; } #box ul li {width: 240px; Высота: 400px; Плавание: осталось; переполнение: скрыто; }Код для JavaScript заключается в следующем:
window.onload = function () {var box = document.getElementbyid ('box'); var ali = box.children [0] .Children; for (var i = 0; i <ali.length; i ++) {ali [i] .style.backgroundimage = 'url (' + 'images/' + (i + 1) + '.jpg'; ali [i] .onmouseover = function () {for (var i = 0; i <ali. Animate (this, {width: 800});Таким образом, демонстрируется демо, реализованная с использованием Native JS. Конечно, инкапсулированная рамка Animate также может быть использована для достижения эффектов карусели, аналогичных NetEase.
Приведенная выше статья представляет собой демонстрацию в стиле Беллы, которая реализует спортивную структуру (пример кода) и инкапсулирует спортивную структуру (пример кода), которая является всем контентом, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.