标题:[求助]用能不能实现滚动首尾相连,中间不要有空白?
只看楼主
xiapi
Rank: 1
等 级:新手上路
威 望:2
帖 子:305
专家分:0
注 册:2006-10-11
 问题点数:0 回复次数:7 
[求助]用能不能实现滚动首尾相连,中间不要有空白?
直接用<marquee>实现滚动,中间都会有一段空白,不能实现无缝连接。
有没有其它好的方法实现首尾相连的滚动?
搜索更多相关主题的帖子: 首尾相连 空白 滚动 
2006-10-11 13:38
lifongmaples
Rank: 1
等 级:新手上路
帖 子:81
专家分:0
注 册:2006-8-27
得分:0 
你的意思是想把它做成一个圆形一样的滚动体吧。这种连接好像还没有见过哟。可能用某种脚本程序可以达到这种效果,不过这只是我猜想的。没有具体实践过的。
2006-10-11 14:03
yaxuxu
Rank: 1
等 级:新手上路
帖 子:53
专家分:0
注 册:2006-10-11
得分:0 
也想知道
2006-10-11 15:15
piaoxue
Rank: 3Rank: 3
来 自:地球
等 级:论坛游侠
威 望:3
帖 子:606
专家分:113
注 册:2005-9-19
得分:0 
不可以   要用JAVASCRIPT 做!

我是做平面设计、网站制作、网站推广、主机域名等业务的站长。有需要的给我站内信吧。
2006-10-11 15:23
SinoPec
Rank: 1
等 级:新手上路
威 望:1
帖 子:63
专家分:0
注 册:2006-10-11
得分:0 
<div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --> <a href="#">链接1</a>
<br> <a href="#">链接2</a>
<br> <a href="#">链接3</a>
<br> <a href="#">链接4</a>
<br> <!-- 字幕内容结束 -->
</div>
<!-- 以下是javascript代码 -->
<script language="javascript">
<!--
marqueesHeight=200; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
style.height=marqueesHeight;
style.overflowY="hidden"; //滚动条不可见
onmouseover=new Function("stopscroll=true"); //鼠标经过,停止滚动
onmouseout=new Function("stopscroll=false"); //鼠标离开,开始滚动
}
//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滚动内容
//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的内容的“两倍”复制回原内容区:
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//设置连续超时,调用"scrollUp()"函数驱动滚动条:
setInterval("scrollUp()",20);
}
document.body.onload=init;
preTop=0; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1; //滚动条向下移动一个像素
//如果滚动条不动了,则向上滚动到和当前画面一样的位置
//当然不仅如此,同样还要向下滚动一个像素(+1):
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script>

[此贴子已经被作者于2006-10-11 22:28:48编辑过]


2006-10-11 22:28
SinoPec
Rank: 1
等 级:新手上路
威 望:1
帖 子:63
专家分:0
注 册:2006-10-11
得分:0 
各个方向的不间断滚动



先制作向上滚动的效果:
  插入代码:
<!-- 指向链接图片url -->
<base href="http://www.it365cn.com">
<div id=demo style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>
<div id=demo1>
<!-- 定义图片 -->
<img src="images/logo_1.gif">
<img src="images/logo/flashempire.gif">
<img src="images/logo.gif">
<img src="images/logo/5dmedia.gif">
<img src="images/logo/macromedia.gif">
<img src="images/logo/sucaiw.gif">
<img src="images/logo/blueieda.gif">
<img src="images/logo/htmlcn.gif">
<img src="images/logo/fwcn.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.it365cn.com">
<div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign=top><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif"><img src="images/logo/fwcn.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>

  制作的方法就简单的介绍完成了。


2006-10-11 22:29
xiapi
Rank: 1
等 级:新手上路
威 望:2
帖 子:305
专家分:0
注 册:2006-10-11
得分:0 
谢谢,学习了

没有什么能够阻挡,我对自由的向往,天马行空的生涯一颗心了无牵挂。
2006-10-12 08:28
yaxuxu
Rank: 1
等 级:新手上路
帖 子:53
专家分:0
注 册:2006-10-11
得分:0 
收藏了~~~谢谢
2006-10-12 11:51



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-95510-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.436083 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved