تصف هذه المقالة طريقة 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> عندما يمر الماوس ، <a href = 'sitejs-16691-1.html' target = '_ blank'> <u> تمرير الصورة </u> </a> Stop Effect </title>
</head>
<type type = "text/css">
<!-
#www_jb51_net {
الخلفية: #fff ؛
الفائض: مخفي.
الحدود: 1px متقطع #CCC ؛
العرض: 325 بكسل ؛
الارتفاع: 245 بكسل ؛
}
#www_jb51_net img {
الحدود: 3px الصلبة #f2f2f2 ؛
}
#indemo {
تعويم: اليسار.
العرض: 800 ٪ ؛
}
#Demo1 {
تعويم: اليسار.
}
#Demo2 {
تعويم: اليسار.
}
->
</style>
<body>
انتقل إلى اليسار
<div id = "www_jb51_net">
<div id = "Indemo">
<div id = "demo1">
<a href = "#"> <img src = "الصور/m01.jpg"/> </a>
<a href = "#"> <img src = "الصور/m02.jpg"/> </a>
<a href = "#"> <img src = "الصور/m03.jpg"/> </a>
<a href = "#"> <img src = "الصور/m04.jpg"/> </a>
<a href = "#"> <img src = "الصور/m05.jpg"/> </a>
<a href = "#"> <img src = "الصور/m06.jpg"/> </a>
</div>
<div id = "demo2"> </viv>
</div>
</div>
<script>
<!-
var speed = 10 ؛
var tab = document.getElementById ("www_jb51_net") ؛
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>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.