HTML 无缝文字滚动怎么做
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 无缝文字滚动怎么做相关的知识，希望对你有一定的参考价值。
现在只能向左滚没了才重新显示 怎么改成类似无缝滚动的呢<table id="tables" style=" float:right; margin-right:10px; margin-bottom:10px; padding-top: 6px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td width="640" style="color:#990000; font-weight:bolder;"><marquee align="down" direction="left" width="100%" height="20" onMouseMove="this.stop();" onMouseOut="this.start();" scrolldelay="250">滚动字幕显示 公告栏 热门关键字等信息 </marquee></td> <td width="10"></td> <td><select class="inputstyle" size="1" name="gcat"> <option value="0" selected="selected">- 所有分类 -</option> <option value="12">----童装</option> <option value="13">------男装</option> <option value="14">------女装</option> </select> </td> <td style="padding-left: 10px;">关键字：</td> <td><input class="inputstyle" size="15" name="gkey" style="margin: 0pt; padding: 0pt; height: 19px;"></td> <td style="padding-left: 5px;"><input name="image" src="images/search.gif" align="middle" type="image"></td> </tr> </tbody> </table>
<html><head>
</head>
<style>
#one
width=220px;
height=200px;
border: 1px solid #069;
overflow:hidden;
font-size:12px;
line-height:20px;
</style>
<body>
<div id="one">
<div id="two">
一直在盼望着一段美丽的爱 <br>
所以我毫不犹疑地将你舍弃 <br>
流浪的途中我不断寻觅 <br>
却没料到回首之时 <br>
年轻的你从未稍离 <br>
从未稍离的你在我心中 <br>
春天来时便反复地吟唱 <br>
那滨江路上的灰沙炎日 <br>
那丽水街前的一地月光 <br>
那清晨园中为谁摘下的茉莉 <br>
那渡船头上风里翻飞的裙裳 <br>
在风里翻飞然后纷纷坠落 <br>
岁月深埋在土中便成琥珀 <br>
在灰色的黎明前我怅然回顾 <br>
亲爱的朋友啊 <br>
难道鸟必要自焚才能成为凤凰<br>
难道青春必要愚昧 <br>
爱必得忧伤 <br>
</div>
<div id="three">
</div>
</div>
<script>
var one=document.getElementById("one");
var two=document.getElementById("two");
var three=document.getElementById("three");
three.innerHTML=two.innerHTML;
function move()
if(three.offsetTop-one.scrollTop<=0)
one.scrollTop-=three.offsetTop;
one.scrollTop++;
window.document.title=one.scrollTop+','+three.offsetTop;
setInterval("move()",30);
</script>
</body>
</html>
无缝滚动要用js实现 这个是以前写的 这个事上下滚动，不过原理一样，你要不会js的话我帮你写个 参考技术A 上下无缝滚动代码：
<div id="demo" style="height:50px;overflow:hidden;">
<div id="indemo" style="height:200%;">
<div id="demo1">
第一行字<br />
第二行字
</div>
<div id="demo2"></div>
</div>
</div>
</body>
<script type="text/javascript">
speed = 100; //数字越大滚得越慢
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
tab2.innerHTML = tab1.innerHTML;
tab.scrollTop = tab1.offsetHeight;
function Marquee()
if (tab.scrollTop >= tab1.offsetHeight)
tab.scrollTop-=tab2.offsetHeight;
else
tab.scrollTop+=1;
var MyMar=setInterval(Marquee,speed);
</script>
左右横向无缝滚动代码
<table cellSpacing=0 cellPadding=0 width=100 align=center border=0>
<tr>
<td width=190 bgColor=#d6f6fd height=27></td>
<td bgColor=#d6f6fd height=27>
<marquee onmouseover=this.stop() onmouseout=this.start() scrollAmount=2 scrollDelay=60 width=580 height=20>
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">横向滚动的广告效果1 [ 7/13/2012]
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">横向滚动的广告效果2 [ 7/13/2012]
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">横向滚动的广告效果3 [ 7/10/2012]
</marquee>
</td>
</tr>
</table> 参考技术B 无缝滚动是要文字连续滚动的效果么？
向上无缝滚动，鼠标放在上面会停止滚动
一般在页面上都会出现一条一条的通告，有些会使用向上滚动或者左右滚动的方式来展示，这样比较美观又不占位置；
现在就说一下这个向上的无缝滚动怎么做
1：html
<div class="two_fr_list"> <ul style="margin-top: -1px;"> <li>1111111111111111111111111</li> <li>222222222222222222222222</li> <li>3333333333333333333333</li> <li>44444444444444444444444444</li> <li>5555555555555555555555555555555</li> <li>6666666666666666666666666666666</li> <li>777777777777777777777777777</li> <li>88888888888888888888888888</li> <li>9999999999999999999999999999</li> <li>111111111111111111111111</li> <li>2222222222222222222222222222222</li> <li>33333333333333333333333</li> <li>4444444444444444444</li> <li>55555555555555555555555555</li> <li>66666666666666666666666666666666666</li> <li>7777777777777777777777777777777777</li> <li>8888888888888888888888888888888888</li> <li>999999999999999999999999999999999</li> </ul> </div>
2：css要设置一下展示这些内容的高度
.two_fr_list { margin: 20px 20px 0; line-height: 28px; font-size: 16px; height: 340px; overflow: hidden; }
3：引入jq库
4：js
// JavaScript Document 包装 (function($){ $.fn.myScroll = function(options){ //默认配置 var defaults = { speed:40, //滚动速度,值越大速度越慢 rowHeight:24 //每行的高度 }; var opts = $.extend({}, defaults, options),intId = []; function marquee(obj, step){ obj.find("ul").animate({ marginTop: ‘-=1‘ },0,function(){ var s = Math.abs(parseInt($(this).css("margin-top"))); if(s >= step){ $(this).find("li").slice(0, 1).appendTo($(this)); $(this).css("margin-top", 0); } }); } this.each(function(i){ var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this); intId[i] = setInterval(function(){ if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this, sh); } }, speed); _this.hover(function(){ clearInterval(intId[i]); },function(){ intId[i] = setInterval(function(){ if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this, sh); } }, speed); }); }); } })(jQuery); $(document).ready(function () { $("div.two_fr_list").myScroll({ speed: 40, //数值越大，速度越慢 rowHeight: 28 //li的高度 }); })
以上是关于HTML 无缝文字滚动怎么做的主要内容，如果未能解决你的问题，请参考以下文章