تصف هذه المقالة طريقة تنفيذ تأثير تبديل صورة التركيز لشبكة Tudou JS المقلدة مع الصور المصغرة. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<TITLE> FOCUS PICTURE STANDING EFFERT لشبكة البطاطس المقلدة مع الصور المصغرة </title>
<type type = "text/css">
/ * إعادة تعيين نمط */
* {الهامش: 0 ؛ الحشو: 0 ؛ الكلمة كسر: كسر الكل ؛ }
الجسم {background: #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: Thankline ؛ }
ul ، li {list-style: none ؛ }
Fieldset ، img {border: none ؛ }
em ، قوي ، استشهد ، th {font-font: normal ؛ خط الوزن: طبيعي ؛ }
/ * Focus_Change Style */
#focus_change {الموضع: النسبية ؛ العرض: 450 بكسل ؛ الارتفاع: 295 بكسل ؛ الفائض: مخفي. الهامش: 20px 0 1px 60px ؛ }
#focus_change_list {الموضع: absolute ؛ العرض: 1800 بكسل ؛ الارتفاع: 295 بكسل ؛ }
#focus_change_list li {float: left ؛ }
#focus_change_list li img {width: 450px ؛ الارتفاع: 295 بكسل ؛ }
.focus_change_opacity {الموضع: absolute ؛ العرض: 450 بكسل ؛ الارتفاع: 70 بكسل ؛ أعلى: 225 بكسل ؛ اليسار: 0 ؛ الخلفية:#000 ؛ مرشح: ألفا (عتامة = 50) ؛ -الموز سعة: 0.5 ؛ العتامة: 0.5 ؛ }
#focus_change_btn {الموضع: absolute ؛ العرض: 450 بكسل ؛ الارتفاع: 65 بكسل ؛ أعلى: 225 بكسل ؛ اليسار: 0 ؛ }
#focus_change_btn ul {padding-left: 5px ؛ }
#focus_change_btn li {display: inline ؛ تعويم: اليسار. الهامش: 0 15px ؛ حشو أعلى: 12 بكسل ؛ }
#focus_change_btn li img {width: 76px ؛ الارتفاع: 50 بكسل ؛ الحدود: 2px الصلبة #888 ؛ }
#focus_change_btn .current {background: url (/uploadfile/200901/1/6C164133877.GIF) لا تربية 37px 8px ؛}
#focus_change_btn .current img {border-color: #EEE ؛ }
</style>
<script type = "text/javaScript">
الدالة $ (id) {return document.getElementById (id) ؛ }
انتقال الوظيفة (ElementId ، Final_x ، Final_y ، الفاصل الزمني) {
if (! document.getElementByid) return false ؛
if (! document.getElementById (elementId)) return 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 repert = "movelement ('"+elementId+"' ،"+final_x+"،"+final_y+"،"+steral+")" ؛
elem.movement = setTimeOut (كرر ، فاصل) ؛
}
وظيفة classnormal () {
var focusBtnList = $ ('Focus_Change_BTN'). getElementsByTagName ('li') ؛
لـ (var i = 0 ؛ i <OccountBtnList.length ؛ i ++) {
FocusBtnList [i] .className = '' ؛
}
}
وظيفة FocusChange () {
var focusBtnList = $ ('Focus_Change_BTN'). getElementsByTagName ('li') ؛
FocusBtnList [0] .onmouseover = function () {
MoveLement ('Focus_Change_List' ، 0،0،5) ؛
classnormal ()
FocusBtnList [0] .ClassName = 'Current'
}
FocusBtnList [1] .onmouseover = function () {
MoveLement ('Focus_Change_List' ،-450،0،5) ؛
classnormal ()
FocusBtnList [1] .ClassName = 'Current'
}
FocusBtnList [2] .onmouseover = function () {
MoveLement ('Focus_Change_List' ،-900،0،5) ؛
classnormal ()
FocusBtnList [2] .ClassName = 'Current'
}
FocusBtnList [3] .onmouseover = function () {
MoveLement ('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'). getElementsByTagName ('li') ؛
لـ (var i = 0 ؛ i <OccountBtnList.length ؛ i ++) {
if (FocusBtnList [i] .className == 'Current') {
var currentNum = i ؛
}
}
if (currentNum == 0) {
MoveLement ('Focus_Change_List' ،-450،0،5) ؛
classnormal ()
FocusBtnList [1] .ClassName = 'Current'
}
if (currentNum == 1) {
MoveLement ('Focus_Change_List' ،-900،0،5) ؛
classnormal ()
FocusBtnList [2] .ClassName = 'Current'
}
if (currentNum == 2) {
MoveLement ('Focus_Change_List' ،-1350،0،5) ؛
classnormal ()
FocusBtnList [3] .ClassName = 'Current'
}
if (currentNum == 3) {
MoveLement ('Focus_Change_List' ، 0،0،5) ؛
classnormal ()
FocusBtnList [0] .ClassName = 'Current'
}
}
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 ="/moves/m03.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><iMg src ="/moves/m04.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><iMg src ="/moves/m09.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><IMG src ="/micts/m10.jpg "/> </a> </li>
</ul>
</div>
<viv> </viv>
<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>
</viv> <!-Focus_Change End->
<div style = "الارتفاع: 20px ؛ الخلفية: #EEE ؛"> </div>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.