كيفية تحقيق تأثير التبديل بين الصورة من اليسار إلى اليمين

تصف هذه المقالة طريقة JS لتحقيق تأثير التبديل بين الصورة من اليسار إلى اليمين. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:

نسخة الكود كما يلي:

<type type = "text/css">

.woon {border: 1px solid #fff ؛}

.wooff {border: 1px solid #ffffff ؛ filter: progid: dimizageTransform.microsoft.alpha (style = 1 ، opatity = 1500 ، endopacity = 1) ؛}

</style>

<script language = "javaScript" type = "text/javaScript">

<!-

window.onerror = function () {return true}

الدالة mm_openbrwindow (theurl ، winname ، الميزات) {//v2.0

Window.Open (theurl ، winname ، الميزات) ؛

}

//->

</script>

<عرض الجدول = 500 الحدود = 0 محاذاة = cencer cellpadding = 0 cellspacing = 0 background = "http://s16.sinaimg.cn/middle/60d27f6dt7942731cd87f&690">

<tr>

<td align = "center">

<div id = fc style = "filter: progid: dimizageTransform.microsoft.gradientwipe (المدة = 3 ، التدرجات = 0.5 ، الحركة = إلى الأمام) ؛ العرض: 500px ؛ الارتفاع: 260 بكسل ؛ الحدود: 1px الصلبة #99cc66">

<div style = "display: block"> <a

href = "#" target = _blank> <img onMouseover = clearAuto () ؛ onMouseout = setauto () الارتفاع = 300 src = "http://s15.sinaimg.cn/middle/60d27f6dtbc987f277bde&690

<div style = "display: none"> <a href = "#" target = "_ blank"> <img onMouseover = clearauto () ؛ onMouseout = setauto () الارتفاع = 300 src = "http://s10.sinaimg.cn/middle/60d27f6dtbc987f42b6b9&690" width = 500 border = 0> </a> </div>

<div style = "display: none"> <a href = "#" target = _blank> <img onMouseover = clearauto () ؛ onMouseout = setauto () الارتفاع = 300 src = "http://s4.sinaimg.cn/middle/60d27f6dtbc987f3c3303&690" العرض = 500 الحدود = 0> </a> </div>

<div style = "display: none"> <a href = "#" target = _blank> <img onMouseover = clearauto () ؛ onMouseout = setauto () الارتفاع = 300 src = "http://s12

</viv> </td>

</r>

<tr>

<td height = 100 valign = "top"> <table border = 0 align = center cellpadding = 0 cellspacing = 1 id = num>

<tr>

<td class = woon onMouseover = clearauto () ؛ onClick = mea (0) ؛ onMouseout = setauto ()>

<img src = "http://s15.sinaimg.cn/middle/60d27f6dtbc987f277bde&690"

<td class = wooff onMouseover = clearauto () ؛ onclick = mea (1) ؛ onMouseout = setauto ()>

<img src = "http://s10.sinaimg.cn/middle/60d27f6dtbc987f42b6b9&690"

<td class = wooff onMouseover = clearauto () ؛ onclick = mea (2) ؛ onMouseout = setauto ()>

<img src = "http://s4.sinaimg.cn/middle/60d27f6dtbc987f3c3303&690" style = "cursor: hand" ondblclick = "mm_openbrwindow ('#' ، '')

<td class = wooff onMouseover = clearauto () ؛ onclick = mea (3) ؛ onMouseout = setauto ()>

<img src = "http://s12.sinaimg.cn/middle/60d27f6dt7942732166fb&690" style = "cursor: hand" ondblclick = "mm_openbrwindow (#'،' ')

</table>

<script>

var n = 0 ؛

var shownum = document.getElementByidx_x ("num") ؛

وظيفة mea (القيمة) {

n = القيمة ؛

setbg (القيمة) ؛

مسرحيات (قيمة) ؛

}

وظيفة setbg (value) {

لـ (var i = 0 ؛ i <4 ؛ i ++)

if (value == i) {

disherum.getElementSbyTagname_r ("td") [i] .className = 'woon' ؛

}

آخر{

distridum.getElementSbyTagname_r ("td") [i] .className = 'wooff' ؛

}

}

وظيفة تشغيل (قيمة) {

مع (fc) {

المرشحات [0] .apply () ؛

من أجل (i = 0 ؛ i <4 ؛ i ++) i == value؟ الأطفال [i] .style.display = "block": الأطفال [i]

المرشحات [0] .play () ؛

}

}

وظيفة clearauto () {clearinterval (autostart)}

وظيفة setauto () {autostart = setInterval ("Auto (n)" ، 5000)}

وظيفة Auto () {

n ++ ؛

إذا (n> 3) n = 0 ؛

يقصد)؛

}

وظيفة sub () {

ن-- ؛

إذا (n <0) n = 3 ؛

يقصد)؛

}

setauto () ؛

</script>

</body>

</html>

آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.