天天看点

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>榧???缁?杩?婊??ㄥ??姝㈡??????</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#>" target="_blank" rel="external nofollow" >绔??跨?规??缃?</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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="/image/1.jpg" 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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="/image/2.jpg" 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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="/image/3.jpg" 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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="/image/4.jpg" 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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="/image/5.jpg" 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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="/image/1.jpg" 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>

继续阅读