Cet article décrit la méthode d'implémentation de l'effet de commutation d'image de mise au point du net tudou de l'imitation JS avec des miniatures. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! 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">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Focus Picture Commutation Effet du filet de pomme de terre d'imitation avec vignettes </TITAL>
<style type = "text / css">
/ * Réinitialiser le style * /
* {margin: 0; rembourrage: 0; Bris de mot: Break-All; }
Body {Background: #fff; Couleur: # 333; Police: 12px / 1.6em Helvetica, Arial, Sans-Serif; }
H1, H2, H3, H4, H5, H6 {taille de police: 1EM; }
A {couleur: # 039; Décoration du texte: aucune; }
A: Hover {text-décoration: soulignement; }
ul, li {list-style: aucun; }
Fieldset, img {border: aucun; }
Em, fort, cite, th {style de police: normal; Police-poids: normal; }
/ * Focus_change Style * /
#focus_change {position: relative; Largeur: 450px; hauteur: 295px; débordement: caché; marge: 20px 0 1px 60px; }
#focus_change_list {position: absolue; Largeur: 1800px; hauteur: 295px; }
#focus_change_list li {float: Left; }
#focus_change_list li img {width: 450px; hauteur: 295px; }
.focus_change_opacity {position: absolue; Largeur: 450px; hauteur: 70px; En haut: 225px; à gauche: 0; Contexte: # 000; filtre: alpha (opacité = 50); -moz-opacité: 0,5; Opacité: 0,5; }
#focus_change_btn {position: absolue; Largeur: 450px; hauteur: 65px; En haut: 225px; à gauche: 0; }
#focus_change_btn ul {padding-left: 5px; }
#focus_change_btn li {display: inline; flottant: à gauche; marge: 0 15px; Tableau de rembourrage: 12px; }
#focus_change_btn li img {width: 76px; hauteur: 50px; Border: 2px solide # 888; }
#focus_change_btn .current {background: url (/uploadfile/200901/1/6c164133877.gif) sans repaire 37px 8px;}
#focus_change_btn .current img {border-color: #eee; }
</ style>
<script type = "text / javascript">
fonction $ (id) {return document.getElementById (id); }
fonction moveLelement (elementId, final_x, final_y, interval) {
if (! document.getElementById) renvoie false;
if (! Document.getElementById (elementId)) renvoie false;
var elem = document.getElementById (élémentId);
if (elem.movement) {
ClearTimeout (elem.movage);
}
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) {
Retour Vrai;
}
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 = "moveLelement ('" + elementId + "'," + final_x + "," + final_y + "," + interval + ")";
elem.movement = setTimeout (répéter, intervalle);
}
fonction classNormal () {
var focgBtnList = $ ('focus_change_btn'). getElementsByTagName ('li');
pour (var i = 0; i <focusbtnList.length; i ++) {
focusbtnlist [i] .classname = '';
}
}
fonction focuschange () {
var focgBtnList = $ ('focus_change_btn'). getElementsByTagName ('li');
focusbtnlist [0] .onMouseOver = function () {
moveLelement ('focus_change_list', 0,0,5);
classNormal ()
focusbtnlist [0] .className = 'Current'
}
focusbtnlist [1] .onMouseOver = function () {
moveLelement ('focus_change_list', - 450,0,5);
classNormal ()
focusbtnlist [1] .className = 'Current'
}
focusbtnlist [2] .onMouseOver = function () {
moveLelement ('focus_change_list', - 900,0,5);
classNormal ()
focusbtnlist [2] .className = 'Current'
}
focusbtnlist [3] .onMouseOver = function () {
moveLelement ('focus_change_list', - 1350,0,5);
classNormal ()
focusbtnlist [3] .className = 'Current'
}
}
setInterval ('AutofOcuschange ()', 5000);
var atuokey = false;
fonction autofocuschange () {
$ ('focus_change'). onMouseOver = function () {atuokey = true}
$ ('focus_change'). onMouseout = function () {atuokey = false}
si (atuokey) revient;
var focgBtnList = $ ('focus_change_btn'). getElementsByTagName ('li');
pour (var i = 0; i <focusbtnList.length; i ++) {
if (focusbtnlist [i] .classname == 'current') {
var currentNum = i;
}
}
if (currentNum == 0) {
moveLelement ('focus_change_list', - 450,0,5);
classNormal ()
focusbtnlist [1] .className = 'Current'
}
if (currentNum == 1) {
moveLelement ('focus_change_list', - 900,0,5);
classNormal ()
focusbtnlist [2] .className = 'Current'
}
if (currentNum == 2) {
moveLelement ('focus_change_list', - 1350,0,5);
classNormal ()
focusbtnlist [3] .className = 'Current'
}
if (currentNum == 3) {
moveLelement ('focus_change_list', 0,0,5);
classNormal ()
focusbtnlist [0] .className = 'Current'
}
}
window.onload = function () {
focuschange ();
}
</cript>
</ head>
<body>
<div id = "focus_change">
<div id = "focus_change_list" style = "top: 0; gauche: 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 = "hauteur: 20px; fond: #eee;"> </div>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.