رمز تأثير صورة JS السلس للغاية ، حلقة سلسة ، سرعة قابلة للتخصيص ، توقف عند تحوم الماوس. ميزةها هي الفصل بين JS وعناوين الصور.
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = gb2312" />
<title> صورة التمرير </title>
</head>
<body>
<type type = "text/css">
<!-
#demo {
الخلفية: #fff ؛
الفائض: مخفي.
الحدود: 1px متقطع #CCC ؛
العرض: 500 بكسل ؛
}
#demo img {
الحدود: 3px الصلبة #f2f2f2 ؛
}
#indemo {
تعويم: اليسار.
العرض: 800 ٪ ؛
}
#Demo1 {
تعويم: اليسار.
}
#Demo2 {
تعويم: اليسار.
}
->
</style>
<div id = "demo">
<div id = "Indemo">
<div id = "demo1">
<a href = "#"> <img src = "/jscss/demoimg/wall_s1.jpg"/> </a>
<a href = "#"> <img src = "/jscss/demoimg/wall_s2.jpg"/> </a>
<a href = "#"> <img src = "/jscss/demoimg/wall_s3.jpg"/> </a>
<a href = "#"> <img src = "/jscss/demoimg/wall_s4.jpg"/> </a>
<a href = "#"> <img src = "/jscss/demoimg/wall_s5.jpg"/> </a>
<a href = "#"> <img src = "/jscss/demoimg/wall_s6.jpg"/> </a>
</div>
<div id = "demo2"> </viv>
</div>
</div>
<script>
<!-
var speed = 10 ؛
var tab = document.getElementById ("Demo") ؛
var tab1 = document.getElementById ("demo1") ؛
var tab2 = document.getElementById ("demo2") ؛
tab2.innerhtml = tab1.innerhtml ؛
وظيفة MARQUEE () {
if (tab2.offsetwidth-tab.scrollleft <= 0)
tab.scrollleft- = tab1.offsetWidth
آخر{
tab.scrollleft ++ ؛
}
}
var mymar = setInterval (سرادق ، السرعة) ؛
tab.onmouseover = function () {clearinterval (mymar)} ؛
tab.onmouseout = function () {mymar = setInterval (marquee ، speed)} ؛
->
</script>
</body>
</html>