บทความนี้อธิบายถึงวิธีการใช้เอฟเฟกต์การสลับภาพโฟกัสของ JS Imitation 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">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> เอฟเฟกต์การสลับภาพโฟกัสของตาข่ายมันฝรั่งเลียนแบบพร้อมรูปขนาดย่อ </title>
<style type = "text/css">
/ * รีเซ็ตสไตล์ */
* {มาร์จิ้น: 0; Padding: 0; คำพูด: break-all; -
ร่างกาย {พื้นหลัง: #FFF; สี:#333; แบบอักษร: 12px/1.6em helvetica, Arial, Sans-Serif; -
H1, H2, H3, H4, H5, H6 {ขนาดตัวอักษร: 1EM; -
A {color:#039; การตกแต่งข้อความ: ไม่มี; -
A: โฮเวอร์ {การกำหนดข้อความ: ขีดเส้นใต้; -
ul, li {list-style: none; -
Fieldset, Img {Border: None; -
em, strong, cite, th {สไตล์ตัวอักษร: ปกติ; Font-Weight: ปกติ; -
/ * สไตล์ focus_change */
#focus_change {ตำแหน่ง: ญาติ; ความกว้าง: 450px; ความสูง: 295px; ล้น: ซ่อน; มาร์จิ้น: 20px 0 1px 60px; -
#focus_change_list {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 1800px; ความสูง: 295px; -
#focus_change_list li {float: ซ้าย; -
#focus_change_list li img {width: 450px; ความสูง: 295px; -
.focus_change_opacity {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 450px; ความสูง: 70px; ด้านบน: 225px; ซ้าย: 0; ความเป็นมา:#000; ตัวกรอง: อัลฟ่า (ความทึบ = 50); -moz-opacity: 0.5; ความทึบ: 0.5; -
#focus_change_btn {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 450px; ความสูง: 65px; ด้านบน: 225px; ซ้าย: 0; -
#FOCUS_CHANGE_BTN UL {PADDING-Left: 5PX; -
#focus_change_btn li {display: inline; ลอย: ซ้าย; มาร์จิ้น: 0 15px; Padding-Top: 12px; -
#focus_change_btn li img {width: 76px; ความสูง: 50px; ชายแดน: 2px Solid #888; -
#focus_change_btn .current {พื้นหลัง: url (/uploadfile/200901/1/6c164133877.gif) ไม่มีการทำซ้ำ 37px 8px;}
#focus_change_btn .current img {สีชายแดน: #eee; -
</style>
<script type = "text/javascript">
ฟังก์ชั่น $ (id) {return document.getElementById (id); -
ฟังก์ชั่น Movelement (ElementId, final_x, final_y, Interval) {
if (! document.getElementById) ส่งคืน FALSE;
if (! document.getElementById (ElementId)) ส่งคืน FALSE;
var elem = document.getElementById (ElementId);
ถ้า (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 repea = "movelement ('"+elementId+"',"+final_x+","+final_y+","+interval+")";
elem.movement = settimeout (ทำซ้ำช่วงเวลา);
-
ฟังก์ชั่น classnormal () {
var focusbtnlist = $ ('focus_change_btn'). getElementsByTagname ('li');
สำหรับ (var i = 0; i <focusbtnlist.length; i ++) {
FocusBtnlist [i] .className = '';
-
-
ฟังก์ชั่นโฟกัส () {
var focusbtnlist = $ ('focus_change_btn'). getElementsByTagname ('li');
Focusbtnlist [0] .onmouseover = function () {
Movelement ('focus_change_list', 0,0,5);
classnormal ()
FocusBTNLIST [0] .className = 'ปัจจุบัน'
-
Focusbtnlist [1] .onmouseover = function () {
Movelement ('focus_change_list',-450,0,5);
classnormal ()
FocusBTNLIST [1] .className = 'ปัจจุบัน'
-
Focusbtnlist [2] .onmouseover = function () {
Movelement ('focus_change_list',-900,0,5);
classnormal ()
FocusBTNLIST [2] .className = 'ปัจจุบัน'
-
Focusbtnlist [3] .onmouseover = function () {
Movelement ('focus_change_list',-1350,0,0);
classnormal ()
FocusBTNLIST [3] .className = 'ปัจจุบัน'
-
-
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'). getElementsByTagname ('li');
สำหรับ (var i = 0; i <focusbtnlist.length; i ++) {
if (focusbtnlist [i] .classname == 'current') {
var currentNum = i;
-
-
if (currentNum == 0) {
Movelement ('focus_change_list',-450,0,5);
classnormal ()
FocusBTNLIST [1] .className = 'ปัจจุบัน'
-
ถ้า (currentNum == 1) {
Movelement ('focus_change_list',-900,0,5);
classnormal ()
FocusBTNLIST [2] .className = 'ปัจจุบัน'
-
ถ้า (currentNum == 2) {
Movelement ('focus_change_list',-1350,0,0);
classnormal ()
FocusBTNLIST [3] .className = 'ปัจจุบัน'
-
ถ้า (currentNum == 3) {
Movelement ('focus_change_list', 0,0,5);
classnormal ()
FocusBTNLIST [0] .className = 'ปัจจุบัน'
-
-
window.onload = function () {
โฟกัส ();
-
</script>
</head>
<body>
<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 ="/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 ของทุกคน