前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >图片无缝上下滚动

图片无缝上下滚动

作者头像
苦咖啡
发布2018-05-07 16:43:06
5.3K0
发布2018-05-07 16:43:06
举报
文章被收录于专栏:我的博客我的博客

今天要用到图片无缝滚动,在网上找了半天要么不能滚动,要么不能无缝。我最后找到了一个可以达到要求的代码,现在贴出来放便大家使用。我测试过的,可以使用。

代码语言:javascript
复制
<div id=demo style=”overflow:hidden; width:475; height:80px;”> 
 <div id=demo1> 
 <a href=”#” charset=”utf-8″ target=”_blank”><img src=”images/ad1.jpg”></a>
 <br>
 <img src=”images/ad2.jpg”>
 <br>
 <img src=”images/ad1.jpg”>
 <br>
 </div> 
 <div id=demo2></div> 
 </div> 
 <script language=”javascript”> 
 var speed=20
 document.getElementById(“demo2”).innerHTML=document.getElementById(“demo1”).innerHTML 
 function Marquee(){ 
 if(document.getElementById(“demo2”).offsetTop-document.getElementById(“demo”).scrollTop<=0) 
 document.getElementById(“demo”).scrollTop-=document.getElementById(“demo1”).offsetHeight 
 else{ 
 document.getElementById(“demo”).scrollTop++ 
 } 
 } 
 var MyMar=setInterval(Marquee,speed) 
 document.getElementById(“demo”).onmouseover=function() {clearInterval(MyMar)} 
 document.getElementById(“demo”).onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
 </script>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2011年7月31日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档