JS图片横向纵向滚动

最新推荐文章于 2021-06-04 17:02:49 发布

转载最新推荐文章于 2021-06-04 17:02:49 发布 · 857 阅读

笔记同时被 2 个专栏收录

130 篇文章

订阅专栏

JavaScript

52 篇文章

订阅专栏

<div id=demo style="overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;"
onmouseover="stopscroll();"
 
onmouseout="doscroll()">
<div id="demo1"
style="white-space:nowrap;padding:0;">
<a href="javascript:alert('发表新贴');"><img src="图片URL"
height=20 width=104 
 
border=0></a>
<a href="javascript:alert('发表回复');"><img src="图片URL"
height=20 width=104 
 
border=0></a>
</div> 
</div> 
<!--滚动的javascript-->
<script> 
var
t=demo.scrollWidth 
demo1.innerHTML+=demo1.innerHTML
function
doMarquee() 
{ 
demo.scrollLeft=demo.scrollLeft<demo.scrollWidth-demo.offsetWidth?demo.scrollLeft+1:t-demo.offsetWidth
} 
function
doscroll() 
{ 
   sc=setInterval(doMarquee,20)
} 
function
stopscroll() 
{ 
   clearInterval(sc)
} 
doscroll()
</script> 
<!--滚动的javascript结束-->

2.纵向

  <div id="demo"
style="height:110px; overflow:hidden ">
    <div id="demo1">
<a href="javascript:alert('发表新贴');"><img src="图片URL"
height=20 width=104 
 
border=0></a>
<a href="javascript:alert('发表回复');"><img src="图片URL"
height=20 width=104 
 
border=0></a>
</div><div id="demo2"></div>
 
<!--滚动的javascript-->
<script> 
var
speed=100 
demo2.innerHTML=demo1.innerHTML
function
Marquees(){ 
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
} 
} 
var
MyMars=setInterval(Marquees,speed) 
demo.onmouseover=function() { clearInterval(MyMars) }
demo.onmouseout=function() { MyMars=setInterval(Marquees,speed) }
zlselect('6');
</script><!--滚动的javascript结束-->
</div> 