Artikel ini menjelaskan metode penerapan efek switching gambar fokus dari js imitasi net tudou dengan thumbnail. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<Title> Fokus Picture Switching Efek Net Kentang Imitasi dengan Thumbnails </iteme>
<type style = "text/css">
/ * Reset gaya */
* {margin: 0; Padding: 0; Word-Break: Break-all; }
body {background: #fff; Warna:#333; Font: 12px/1.6em helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 {font-size: 1em; }
A {Color:#039; Dekorasi Teks: Tidak Ada; }
A: Hover {Text-Decoration: Underline; }
ul, li {List-style: tidak ada; }
fieldset, img {border: none; }
em, kuat, mengutip, tH {font-style: normal; Font-Weight: Normal; }
/ * Focus_change style */
#focus_change {position: relatif; Lebar: 450px; Tinggi: 295px; meluap: tersembunyi; margin: 20px 0 1px 60px; }
#focus_change_list {position: absolute; Lebar: 1800px; Tinggi: 295px; }
#focus_change_list li {float: left; }
#focus_change_list li img {width: 450px; Tinggi: 295px; }
.focus_change_opacity {position: absolute; Lebar: 450px; Tinggi: 70px; Atas: 225px; Kiri: 0; Latar belakang:#000; filter: alpha (opacity = 50); -Moz-opacity: 0,5; Opacity: 0,5; }
#focus_change_btn {position: absolute; Lebar: 450px; Tinggi: 65px; Atas: 225px; Kiri: 0; }
#focus_change_btn ul {padding-left: 5px; }
#focus_change_btn li {display: inline; float: kiri; margin: 0 15px; Padding-top: 12px; }
#focus_change_btn li img {width: 76px; Tinggi: 50px; Perbatasan: 2px Solid #888; }
#focus_change_btn .current {latar belakang: url (/uploadfile/200901/1/6c164133877.gif) no-rePeat 37px 8px;}
#focus_change_btn .current img {border-color: #eee; }
</tyle>
<type skrip = "Teks/JavaScript">
fungsi $ (id) {return document.getElementById (id); }
function moveLement (ElementId, final_x, final_y, interval) {
if (! document.geteLementById) return false;
if (! document.geteLementById (elementId)) return 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) {
Kembali Benar;
}
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 ulangi = "moveElement ('"+elementId+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout (ulangi, interval);
}
function classnormal () {
var focusbtnlist = $ ('focus_change_btn'). GetElementsbyTagname ('li');
untuk (var i = 0; i <focustbtnlist.length; i ++) {
focusbtnlist [i] .className = '';
}
}
Function focusChange () {
var focusbtnlist = $ ('focus_change_btn'). GetElementsbyTagname ('li');
focusbtnlist [0] .onmouseOver = function () {
moveElement ('focus_change_list', 0,0,5);
classnormal ()
focusbtnlist [0] .className = 'saat ini'
}
focusbtnlist [1] .onmouseOver = function () {
moveElement ('focus_change_list',-450,0,5);
classnormal ()
focusbtnlist [1] .className = 'saat ini'
}
focusbtnlist [2] .onmouseOver = function () {
moveElement ('focus_change_list',-900,0,5);
classnormal ()
focusbtnlist [2] .className = 'saat ini'
}
focusbtnlist [3] .onmouseOver = function () {
moveElement ('focus_change_list',-1350,0,5);
classnormal ()
focusbtnlist [3] .className = 'saat ini'
}
}
setInterval ('autofocuschange ()', 5000);
var atuokey = false;
fungsi autofocuschange () {
$ ('focus_change'). onmouseover = function () {atuokey = true}
$ ('focus_change'). onmouseout = function () {atuokey = false}
if (atuokey) kembali;
var focusbtnlist = $ ('focus_change_btn'). GetElementsbyTagname ('li');
untuk (var i = 0; i <focustbtnlist.length; i ++) {
if (focusbtnlist [i] .className == 'saat ini') {
var currentnum = i;
}
}
if (currentNum == 0) {
moveElement ('focus_change_list',-450,0,5);
classnormal ()
focusbtnlist [1] .className = 'saat ini'
}
if (currentNum == 1) {
moveElement ('focus_change_list',-900,0,5);
classnormal ()
focusbtnlist [2] .className = 'saat ini'
}
if (currentNum == 2) {
moveElement ('focus_change_list',-1350,0,5);
classnormal ()
focusbtnlist [3] .className = 'saat ini'
}
if (currentNum == 3) {
moveElement ('focus_change_list', 0,0,5);
classnormal ()
focusbtnlist [0] .className = 'saat ini'
}
}
window.onload = function () {
FocusChange ();
}
</script>
</head>
<body>
<Div id = "focus_change">
<Div id = "focus_change_list" style = "Top: 0; Left: 0;">
<ul>
<li> <a href = "// www.vevb.com/"><img src ="/gambar/m03.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><img src ="/gambar/m04.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><img src ="/gambar/m09.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><img src ="/gambar/m10.jpg "/> </a> </li>
</ul>
</div>
<div> </div>
<Div id = "focus_change_btn">
<ul>
<li> <a href = "#"> <img src = "/gambar/s3.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/gambar/s4.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/gambar/s9.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/gambar/s10.jpg"/> </a> </li>
</ul>
</div>
</div> <!-focus_change end->
<Div style = "Tinggi: 20px; latar belakang: #eee;"> </div>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.