概述
<!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>鼠标经过滚动停止效果。</title>
</head>
<style type="text/css">
<!--
#www_zzjs_net {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 400px;
height:300px;
}
#www_zzjs_net img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<body>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a><hr>
向左滚动
<div id="www_zzjs_net">
<div id="indemo">
<div id="demo1">
<div style="float:left;">
<div style="float: left; width:80px"><a href="#"><img src="/image/1.jpg" border="0" style="float:left" οnlοad="return imgzoom(this,600);" οnclick="javascript:window.open(this.src);" style="cursor:pointer;"/></a></div>
<div style="float: left; width:80px"><a href="#"><img src="/image/2.jpg" border="0" style="float:left" οnlοad="return imgzoom(this,600);" οnclick="javascript:window.open(this.src);" style="cursor:pointer;"/></a></div>
<div style="float: left; width:80px"><a href="#"><img src="/image/3.jpg" border="0" style="float:left" οnlοad="return imgzoom(this,600);" οnclick="javascript:window.open(this.src);" style="cursor:pointer;"/></a></div>
<div style="float: left; width:80px"><a href="#"><img src="/image/4.jpg" border="0" style="float:left" οnlοad="return imgzoom(this,600);" οnclick="javascript:window.open(this.src);" style="cursor:pointer;"/></a></div>
<div style="float: left; width:80px"><a href="#"><img src="/image/5.jpg" border="0" style="float:left" οnlοad="return imgzoom(this,600);" οnclick="javascript:window.open(this.src);" style="cursor:pointer;"/></a></div>
<div style="float: left; width:80px"><a href="#"><img src="/image/1.jpg" border="0" style="float:left" οnlοad="return imgzoom(this,600);" οnclick="javascript:window.open(this.src);" style="cursor:pointer;"/></a></div>
</div>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
var speed=10;
var tab=document.getElementById("www_zzjs_net");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
// alert(tab2.offsetWidth);
// alert(tab.scrollLeft);
// alert(tab1.offsetWidth);
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.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
</script>
</body>
</html>
最后
以上就是犹豫诺言为你收集整理的js图片滚动，鼠标经过滚动停止效果的全部内容，希望文章能够帮你解决js图片滚动，鼠标经过滚动停止效果所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复