js實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)圖片滾動(dòng)停止的方法
更新時(shí)間：2015年02月16日 10:12:59 作者：代碼家園
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)圖片滾動(dòng)停止的方法,可實(shí)現(xiàn)js滾動(dòng)特效中的鼠標(biāo)懸停停止圖片滾動(dòng)的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)圖片滾動(dòng)停止的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!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>鼠標(biāo)經(jīng)過(guò)時(shí)，<a href='sitejs-16691-1.html' target='_blank'><u>圖片滾動(dòng)</u></a>停止效果</title>
</head>
<style type="text/css">
<!--
#www_jb51_net {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 325px;
height:245px;
}
#www_jb51_net img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<body>
向左滾動(dòng)
<div id="www_jb51_net">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="images/m01.jpg" border="0" /></a>
<a href="#"><img src="images/m02.jpg" border="0" /></a>
<a href="#"><img src="images/m03.jpg" border="0" /></a>
<a href="#"><img src="images/m04.jpg" border="0" /></a>
<a href="#"><img src="images/m05.jpg" border="0" /></a>
<a href="#"><img src="images/m06.jpg" border="0" /></a>
</div>
<div id="demo2"></div>
</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;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
基于javascript實(shí)現(xiàn)圖片滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)圖片滑動(dòng)效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的朋友可以參考一下2016-05-05
使用BootStrap實(shí)現(xiàn)懸浮窗口的效果
本文給大家分享使用BootStrap實(shí)現(xiàn)懸浮窗口的效果，神奇的 bootstrap就自帶了這個(gè)功能。所以就用bootstrap的popover插件做了，效果還不錯(cuò)，感興趣的朋友參考下吧2016-12-12
簡(jiǎn)單實(shí)現(xiàn)js浮動(dòng)框
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)js浮動(dòng)框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
本文主要介紹了js判斷是否是手機(jī)頁(yè)面的方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法
這篇文章主要介紹了JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法,涉及javascript針對(duì)table元素遍歷與獲取的技巧,需要的朋友可以參考下2015-07-07
Bootstrap編寫(xiě)一個(gè)兼容主流瀏覽器的受眾巨幕式風(fēng)格頁(yè)面
這篇文章主要介紹了Bootstrap編寫(xiě)一個(gè)兼容IE8、谷歌等主流瀏覽器的受眾巨幕式風(fēng)格頁(yè)面，感興趣的小伙伴們可以參考一下2016-07-07
原生JS實(shí)現(xiàn)勻速圖片輪播動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)勻速圖片輪播動(dòng)畫(huà),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
layui實(shí)現(xiàn)checkbox的目錄樹(shù)tree的例子
今天小編就為大家分享一篇layui實(shí)現(xiàn)checkbox的目錄樹(shù)tree的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
怎么限制input的text里輸入的值只能是數(shù)字(正則、js)
這篇文章主要通過(guò)正則表達(dá)式和JS代碼限制input的text里輸入的值只能是數(shù)字的相關(guān)資料,需要的朋友可以參考下2016-05-05
最近寫(xiě)管理端的需求，發(fā)現(xiàn)有一個(gè)excel導(dǎo)出的需求，所以正好本文就來(lái)和大家分享一下導(dǎo)出excel文件的三種實(shí)現(xiàn)方式，感興趣的小伙伴可以了解一下2023-07-07