この記事では、マウスが通過したときに画像スクロールが停止することを実現するJSの方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
コードコピーは次のとおりです。
<！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 = gb2312" />
<Title>マウスが通り過ぎると、<a href = 'sitejs-16691-1.html'ターゲット= '_ blank'> <u>画像スクロール</u> </a>停止効果</title>
</head>
<style type = "text/css">
<！ -
＃www_jb51_net {
背景：#fff;
オーバーフロー：隠し;
ボーダー：1pxダッシュ#ccc;
幅：325px;
高さ：245px;
}
＃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 = "images/m01.jpg"/> </a>
<a href = "＃"> <img src = "images/m02.jpg"/> </a>
<a href = "＃"> <img src = "images/m03.jpg"/> </a>
<a href = "＃"> <img src = "images/m04.jpg"/> </a>
<a href = "＃"> <img src = "images/m05.jpg"/> </a>
<a href = "＃"> <img src = "images/m06.jpg"/> </a>
</div>
<div id = "demo2"> </div>
</div>
</div>
<スクリプト>
<！ -
var速度= 10;
var tab = document.getElementById（ "www_jb51_net"）;
var tab1 = document.getElementById（ "demo1"）;
var tab2 = document.getElementById（ "demo2"）;
tab2.innerhtml = tab1.innerhtml;
function marquee（）{
if（tab2.offsetwidth-tab.scrollleft <= 0）
tab.scrollleft- = tab1.offsetwidth
それ以外{
Tab.Scrollleft ++;
}
}
var mymar = setinterval（Marquee、Speed）;
tab.onmouseover = function（）{clearInterval（mymar）};
tab.onmouseout = function（）{mymar = setinterval（marquee、speed）};
- >
</script>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。