Dieser Artikel beschreibt die Methode zur Implementierung des Fokus -Image -Switching -Effekts von JS Imitation Tudou Net mit Miniaturansichten. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: <! 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">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Fokus Bildschaltwirkung von Nachahmungskartoffelnetz mit Miniaturansichten </title>
<style type = "text/css">
/ * Stil zurücksetzen */
* {Margin: 0; Polsterung: 0; Wortausbruch: Break-All; }
Körper {Hintergrund: #fff; Farbe:#333; Schriftart: 12px/1.6EM Helvetica, Arial, Sans-Serif; }
H1, H2, H3, H4, H5, H6 {Schriftgröße: 1EM; }
a {Farbe:#039; Textdekoration: Keine; }
A: Hover {Textdekoration: Unterstreichung; }
ul, li {Listenstil: Keine; }
Fieldset, img {Border: Keine; }
em, stark, zitieren, th {Schriftstil: normal; Schriftgewicht: normal; }
/ * Focus_change style */
#focus_change {Position: relativ; Breite: 450px; Höhe: 295px; Überlauf: versteckt; Rand: 20px 0 1px 60px; }
#focus_change_list {Position: Absolute; Breite: 1800px; Höhe: 295px; }
#focus_change_list li {float: links; }
#focus_change_list li img {width: 450px; Höhe: 295px; }
.focus_change_opacity {Position: absolut; Breite: 450px; Höhe: 70px; Oben: 225px; links: 0; Hintergrund:#000; Filter: Alpha (Opazität = 50); -moz-opacity: 0,5; Deckkraft: 0,5; }
#focus_change_btn {Position: absolut; Breite: 450px; Höhe: 65px; Oben: 225px; links: 0; }
#focus_change_btn ul {padding-links: 5px; }
#focus_change_btn li {display: inline; float: links; Rand: 0 15px; Padding-Top: 12px; }
#focus_change_btn li img {width: 76px; Höhe: 50px; Grenze: 2PX Solid #888; }
#focus_change_btn .current {Hintergrund: URL (/UploadFile/200901/1/6c164133877.gif) No-Repeat 37px 8px;}
#focus_change_btn .current img {border-color: #eee; }
</style>
<script type = "text/javaScript">
Funktion $ (id) {return document.getElementById (id); }
Funktion MOVELEMENT (ElementId, Final_x, Final_y, Intervall) {
if (! document.getElementById) return false;
if (! document.getElementById (elementId)) return false;
var elem = document.getElementById (elementId);
if (Elem.Movement) {
Clearimeout (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) {
zurückkehren;
}
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 repep = "moveElement ('"+elementId+"',"+final_x+","+final_y+","+intervall+")";
Elem.Movement = setTimeout (Wiederholung, Intervall);
}
Funktion classnormal () {
var focusBtnlist = $ ('focus_change_btn'). getElementsByTagName ('li');
für (var i = 0; i <focusBtnlist.length; i ++) {
FocusBtnList [i] .ClassName = '';
}
}
Funktion focusChange () {
var focusBtnlist = $ ('focus_change_btn'). getElementsByTagName ('li');
FocusBtnList [0] .onmouseover = function () {
moveElement ('focus_change_list', 0,0,5);
klassennormal ()
FocusBtnlist [0] .ClassName = 'Current'
}
FocusBtnList [1] .onmouseover = function () {
moveElement ('focus_change_list',-450,0,5);
klassennormal ()
FocusBtnList [1] .ClassName = 'Current'
}
FocusBtnList [2] .onmouseover = function () {
MoveElement ('focus_change_list',-900,0,5);
klassennormal ()
FocusBtnList [2] .ClassName = 'Current'
}
FocusBtnList [3] .onmouseover = function () {
MoveElement ('focus_change_list',-1350,0,5);
klassennormal ()
FocusBtnlist [3] .ClassName = 'Current'
}
}
setInterval ('autofocuschange ()', 5000);
var atuokey = false;
Funktion Autofocuschange () {
$ ('focus_change'). onmouseover = function () {atuokey = true}
$ ('focus_change'). onmouseout = function () {atuokey = false}
Wenn (Atuokey) zurückkehren;
var focusBtnlist = $ ('focus_change_btn'). getElementsByTagName ('li');
für (var i = 0; i <focusBtnlist.length; i ++) {
if (focusBtnList [i] .className == 'current') {
var curr Currentnum = i;
}
}
if (currentnum == 0) {
moveElement ('focus_change_list',-450,0,5);
klassennormal ()
FocusBtnList [1] .ClassName = 'Current'
}
if (currentnum == 1) {
MoveElement ('focus_change_list',-900,0,5);
klassennormal ()
FocusBtnList [2] .ClassName = 'Current'
}
if (currentnum == 2) {
MoveElement ('focus_change_list',-1350,0,5);
klassennormal ()
FocusBtnlist [3] .ClassName = 'Current'
}
if (currentnum == 3) {
moveElement ('focus_change_list', 0,0,5);
klassennormal ()
FocusBtnlist [0] .ClassName = 'Current'
}
}
window.onload = function () {
FocusChange ();
}
</script>
</head>
<body>
<div id = "focus_change">
<div id = "focus_change_list" style = "top: 0; links: 0;">
<ul>
<li> <a href = "// www.vevb.com/"><img src ="/bilder/m03.jpg "/> </a> </li>>
<li> <a href = "// www.vevb.com/"><img src ="/bilder/m04.jpg "/> </a> </li>>
<li> <a href = "// www.vevb.com/"><img src ="/bilder/m09.jpg "/> </a> </li>>
<li> <a href = "// www.vevb.com/"><img src ="/bilder/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 = "Höhe: 20px; Hintergrund: #eee;"> </div>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.