[分享]文字不间断滚动代码 | 图片不间断滚动代码 | 表格内容不间断滚动代码 - 外贸网站建设,SOHO英文网页制作,网站设计公司--伊路网络工作室 - 建站知识库 - 网站建设专题

登陆

资料

在线

排行

帖子

文件

查询

收件箱

风格

加入收藏

使用帮助


首页 >> 建站知识库 >> 网站建设专题 >> 『网站维护教程\|网页设计经验交流』 >> [分享]文字不间断滚动代码 \| 图片不间断滚动代码 \|...


新帖新投票回复帖子讨论区精华区	上篇刷新树型下篇

帖子主题: [分享]文字不间断滚动代码 | 图片不间断滚动代码 | 表格内容不间断滚动代码

头衔：论坛总管理员

Admin

荣誉：管理员
职务：总版主
级别：圣骑士
积分：547
经验：3330
文章：271
注册：03-01-20 23:27

发表: 2009-04-21 04:12:16 人气:44059

楼主

[分享]文字不间断滚动代码 | 图片不间断滚动代码 | 表格内容不间断滚动代码

一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆副本，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为 demo1与demo2一样，所以分不出跳动的瞬间，从而达到"无缝"滚动的目的。

向上滚动：
<div id=demo style=overflow:hidden;height:100;width:90;
background:#214984;color:#ffffff>
<div id=demo1>
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2
function Marquee(){
//当滚动至demo1与demo2交界时
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseover=function() {clearInterval(MyMar)}
//鼠标移开时重设定时器
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>

向下滚动：
<div id=demo style=overflow:hidden;height:100;width:90;
background:#214984;color:#ffffff>
<div id=demo1>
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
</div>
<div id=demo2></div>
</div>
<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>

向左滚动：
<div id="demo" style="overflow:hidden;width:670px;color:#ffffff;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="demo1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
   <td><img src="logo.gif" width="88"></td>
<td><img src="logo.gif" width="88"></td>
   <td><img src="logo.gif" width="88"></td>
   <td><img src="logo.gif" width="88"></td>
<td><img src="logo.gif" width="88"></td>
</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=1//速度数值越大速度越慢
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>

向右滚动：
<div id="demo" style="overflow:hidden;width:670px;color:#ffffff;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="demo1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
   <td><img src="logo.gif" width="88"></td>
<td><img src="logo.gif" width="88"></td>
   <td><img src="logo.gif" width="88"></td>
   <td><img src="logo.gif" width="88"></td>
<td><img src="logo.gif" width="88"></td>
</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=1//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
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>

还有一种常用的div方法的
<div id="demo" style="overflow:hidden;height:100px;">
<div id="demo1" style="line-height:150%">
<img src='logo/(1).jpg' width=100 height=42 border=0 />
<img src='logo/(2).jpg' width=100 height=53 border=0 />
<img src='logo/(3).jpg' width=100 height=73 border=0 />
<img src='logo/(7).jpg' width=100 height=44 border=0 />
<img src='logo/(4).JPG' width=100 height=98 border=0 />
<img src='logo/(5).jpg' width=100 height=45 border=0 />
<img src='logo/(6).jpg' width=100 height=101 border=0 />
<img src='logo/(8).jpg' width=100 height=95 border=0 />
<img src='logo/(9).jpg' width=100 height=42 border=0 />
<img src='logo/(10).jpg' width=100 height=127 border=0 />
<img src='logo/(11).jpg' width=100 height=25 border=0 />
<img src='logo/(12).jpg' width=100 height=27 border=0 />
<img src='logo/(13).jpg' width=100 height=99 border=0 />
<img src='logo/(9).jpg' width=100 height=42 border=0 />
<img src='logo/(14).jpg' width=100 height=84 border=0 />
<img src='logo/(15).jpg' width=100 height=97 border=0 />
<img src='logo/(16).jpg' width=100 height=102 border=0 /></div>

<div id="demo2"></div>
</div>
<script>
var speed=40;
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
var demo=document.getElementById("demo");
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>

elut.cn注
如果是动态内容不能成功的话，可以在滚动的内容外套一层表格，说明如下：
表格为一行两列,表格table外为demo
表格第一个单元格td为demo1 (滚动的部分放在该单元格内)
表格第二个单元格td为demo2

专业外贸英文网站建设｜多语种网站建设(点击查看方案)

9 7 1 8 : 此主题共有1帖此页1帖每页100帖

回复帖子注意: *为必填项

*用户名和密码

用户名密码注册新用户

*帖子名称

长度不得超过255字

内容(最大16K)
是否是UBB代码

内容支持插入UBB标签
使用方法请参考帮助

其它选项:

显示签名

不允许回复

- UBB标签

- 颜色表 Alt+S或Ctrl+Enter快速提交