关闭

图片左右循环连续滚动代码,解决marquee的留白问题

标签: functiondivjavascriptborder
1430人阅读 评论(0) 收藏 举报
 

向上:
<base

href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/">

<div id=demo style="overflow:hidden; width:128px; height:300px;">
<div id=demo1>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
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>

向下:
<base

href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/">

<div id=demo style="overflow:hidden; width:128px; height:300px;">
<div id=demo1>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
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://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/">
<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left

cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img

src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img

src="bzjd.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>

向右:
<base

href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/">
<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left

cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img

src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img

src="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<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>

 
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

marquee图片无缝拼接滚动

marquee图片无缝滚动 先了解一下对象的几个的属性: innerHTML:     设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动...
  • zhuyu19911016520
  • zhuyu19911016520
  • 2014-04-25 15:47
  • 10440

marquee标签实现跑马灯效果--无缝滚动

今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果。但无意中发现了一个html标签——可以实现多种滚动效果,无需js...
  • xiaozhi_2016
  • xiaozhi_2016
  • 2016-07-29 16:05
  • 24165

前端页面实现组件从左向右不间断循环滚动

RT. 我之前写过一个
  • killzero
  • killzero
  • 2014-08-29 11:28
  • 1362

图片左右循环连续滚动代码,解决marquee的留白问题

想必大家都注意到的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出,不管怎么做,都略显麻烦。下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放de...
  • huangjianxiang1875
  • huangjianxiang1875
  • 2012-07-25 18:11
  • 8469

上下左右连续滚动图片的JS代码

向上滚动的JS代码: <img src="http://www.hrbseo.com
  • huminghai
  • huminghai
  • 2011-05-24 09:30
  • 428

6屏左右循环滚动图片代码

  • 2012-01-31 17:27
  • 132KB
  • 下载

左右循环图片滚动代码

  • 2012-07-23 09:38
  • 133KB
  • 下载

带左右箭头按钮的js循环滚动图片特效代码

  • 2015-01-22 09:57
  • 139KB
  • 下载

marquee图片无缝滚动(上下左右均可)

  • 2014-11-17 11:22
  • 1.92MB
  • 下载

图片连续循环滚动代码(向上、下、左、右)

向上:                                   var spe...
  • net_xxl519
  • net_xxl519
  • 2015-07-15 14:10
  • 242
    个人资料
    • 访问:11831953次
    • 积分:65242
    • 等级:
    • 排名:第40名
    • 原创:675篇
    • 转载:2276篇
    • 译文:0篇
    • 评论:554条
    文章分类
    文章存档
    最新评论
    计算流量