В этой статье описывается метод реализации эффекта переключения изображений фокусировки JS имитации Tudou Net с миниатюрами. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Скопируйте код следующим образом: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<TILE> Фокус -картинки Эффект имитационной сетки картофеля с миниатюрами </title>
<стиль типа = "text/css">
/ * Сбросить стиль */
* {маржа: 0; Заполнение: 0; разрыв в словесном: разрыв; }
Body {founale: #fff; Цвет:#333; Шрифт: 12px/1.6em helvetica, Arial, Sans-Serif; }
H1, H2, H3, H4, H5, H6 {Font-Size: 1EM; }
a {color:#039; Текстовое декорация: нет; }
A: Hover {Text-Decoration: Underline; }
ul, li {list-style: нет; }
Fieldset, img {граница: нет; }
Em, Strong, Cite, th {font-style: нормальный; шрифт-вес: нормальный; }
/ * FOCUE_CHANGE Стиль */
#focus_change {позиция: относительно; Ширина: 450px; Высота: 295px; переполнение: скрыто; Маржа: 20px 0 1px 60px; }
#focus_change_list {position: Absolute; Ширина: 1800px; Высота: 295px; }
#focus_change_list li {float: left; }
#focus_change_list li img {width: 450px; Высота: 295px; }
.focus_change_opacity {position: Absolute; Ширина: 450px; Высота: 70px; Верх: 225px; слева: 0; Фон:#000; Фильтр: альфа (непрозрачность = 50); -Моз-мобилизация: 0,5; непрозрачность: 0,5; }
#focus_change_btn {position: Absolute; Ширина: 450px; Высота: 65px; Верх: 225px; слева: 0; }
#focus_change_btn ul {padding-left: 5px; }
#focus_change_btn li {display: inline; Плавание: осталось; Полевая: 0 15px; надоеволок: 12px; }
#focus_change_btn li img {width: 76px; Высота: 50px; Граница: 2PX SOLID #888; }
#focus_change_btn .current {founale: url (/uploadfile/200901/1/6c164133877.gif) no-repeat 37px 8px;}
#focus_change_btn .current img {border-color: #eee; }
</style>
<script type = "text/javascript">
Функция $ (id) {return document.getElementByid (id); }
функция MoveElement (elementId, final_x, final_y, интервал) {
if (! document.getElementById) вернуть false;
if (! document.getElementById (elementId)) вернуть false;
var elem = document.getElementById (elementId);
if (elem.movement) {
ClearTimeout (elem.Movement);
}
if (! elem.style.left) {
elem.style.left = "0px";
}
if (! elem.style.top) {
elem.style.top = "0px";
}
var xpos = parseint (elem.style.left);
var ypos = parseint (elem.style.top);
if (xpos == final_x && ypos == final_y) {
вернуть истину;
}
if (xpos <final_x) {
var dist = math.ceil ((final_x - xpos)/10);
xpos = xpos + dist;
}
if (xpos> final_x) {
var dist = math.ceil ((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos <final_y) {
var dist = math.ceil ((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos> final_y) {
var dist = math.ceil ((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement ('"+elementId+"',"+final_x+","+final_y+","+интервал+")";
elem.movement = settimeout (повторный, интервал);
}
function classnormal () {
var FocusBtnList = $ ('FOCUS_CHANGE_BTN'). GETELEMENTEMSBYTAGNAME ('li');
for (var i = 0; i <focebtbtlist.length; i ++) {
FocusBtnList [i] .className = '';
}
}
function focuschange () {
var FocusBtnList = $ ('FOCUS_CHANGE_BTN'). GETELEMENTEMSBYTAGNAME ('li');
FocusBtnList [0] .onMouseOver = function () {
MoveElement ('FOCUS_CHANGE_LIST', 0,0,5);
Classnormal ()
FocusBtnlist [0] .className = 'current'
}
FocusBtnlist [1] .onmouseOver = function () {
MoveElement ('FOCUS_CHANGE_LIST',-450,0,5);
Classnormal ()
FocusBtnlist [1] .className = 'current'
}
FocusBtnlist [2] .onmouseOver = function () {
MoveElement ('FOCUS_CHANGE_LIST',-900,0,5);
Classnormal ()
FocusBtnList [2] .className = 'current'
}
FocusBtnList [3] .onMouseOver = function () {
MoveElement ('FOCUS_CHANGE_LIST',-1350,0,5);
Classnormal ()
FocusBtnlist [3] .className = 'current'
}
}
setInterval ('AutoFocusChange ()', 5000);
var atuokey = false;
функция AutoFoCusChAnge () {
$ ('focus_change'). onmouseover = function () {atuokey = true}
$ ('focus_change'). onmouseout = function () {atuokey = false}
Если (atuokey) возврат;
var FocusBtnList = $ ('FOCUS_CHANGE_BTN'). GETELEMENTEMSBYTAGNAME ('li');
for (var i = 0; i <focebtbtlist.length; i ++) {
if (FocusBtnList [i] .className == 'current') {
var currentnum = i;
}
}
if (currentnum == 0) {
MoveElement ('FOCUS_CHANGE_LIST',-450,0,5);
Classnormal ()
FocusBtnlist [1] .className = 'current'
}
if (currentnum == 1) {
MoveElement ('FOCUS_CHANGE_LIST',-900,0,5);
Classnormal ()
FocusBtnList [2] .className = 'current'
}
if (currentnum == 2) {
MoveElement ('FOCUS_CHANGE_LIST',-1350,0,5);
Classnormal ()
FocusBtnlist [3] .className = 'current'
}
if (currentnum == 3) {
MoveElement ('FOCUS_CHANGE_LIST', 0,0,5);
Classnormal ()
FocusBtnlist [0] .className = 'current'
}
}
window.onload = function () {
FocusChange ();
}
</script>
</head>
<тело>
<div id = "Focus_change">
<div id = "focus_change_list" style = "top: 0; слева: 0;">
<ul>
<li> <a href = "// www.vevb.com/"><img src ="/images/m03.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><img src ="/images/m04.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><img src ="/images/m09.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><img src ="/images/m10.jpg "/> </a> </li>
</ul>
</div>
<div> </div>
<div id = "focus_change_btn">
<ul>
<li> <a href = "#"> <img src = "/images/s3.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/images/s4.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/images/s9.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/images/s10.jpg"/> </a> </li>
</ul>
</div>
</div> <!-Focus_change End->
<div style = "Высота: 20px; фон: #eee;"> </div>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.