JavaScript实现图片的不间断连续滚动

王朝html/css/js·作者佚名  2008-05-20
窄屏简体版  字體: |||超大  

制作的代码不给大家加注释了!代码中的图片大家都可以自己加上自己的超级连接,修改的方法为:<a href="连接的地址" target=_blank><img src="/img/link.gif" width=图片宽度 height=图片高度 border="0"></a>

先制作向上滚动的效果:

<!-- 指向链接图片url -->

<base href="http://www.webjx.com">

<div id=demo style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>

<div id=demo1>

<!-- 定义图片 -->

<img src="/img/link.gif">

<img src="/img/link1.gif">

<img src="/img/link2.gif">

<img src="/img/link3.gif">

<img src="/img/link4.gif">

</div>

<div id=demo2></div>

</div>

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetTop-demo.scrollTop<=0)

demo.scrollTop-=demo1.offsetHeight

else{

demo.scrollTop++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

制作向下滚动的效果:

将上面“制作向上滚动的效果”中的红色字体Js部分替换成:

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollTop=demo.scrollHeight

function Marquee(){

if(demo1.offsetTop-demo.scrollTop>=0)

demo.scrollTop+=demo2.offsetHeight

else{

demo.scrollTop--

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

制作向左滚动的效果:

<base href="http://www.webjx.com">

<div id=demo style=overflow:hidden;height:33;width:200;background:#214984;color:#ffffff>

<table align=left cellpadding=0 cellspace=0 border=0>

<tr>

<td id=demo1 valign=top><img src="/img/link.gif"><img src="/img/link1.gif"><img src="/img/link2.gif"><img src="/img/link3.gif">

</td>

<td id=demo2 valign=top></td>

</tr>

</table>

</div>

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

制作向右滚动的效果:

将上面“制作向左滚动的效果”中的红色字体Js部分替换成:

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollLeft=demo.scrollWidth

function Marquee(){

if(demo.scrollLeft<=0)

demo.scrollLeft+=demo2.offsetWidth

else{

demo.scrollLeft--

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航