Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码

首先是Jquery
</p> <p><title>无标题文档</title> </p> <p><!-- *{ margin:0; padding:0;} ul,li{ list-style-type:none;} body{ font-size:13px; background-color:#999999;} #con{ width:700px; height:400px; margin:10px auto; position:relative; border:1px #666 solid; background-color:#FFFFFF; overflow:hidden;} #con ul{ position:absolute; margin:10px; top:0; left:0; padding:0;} #con ul li{ width:100%; border-bottom:1px #333333 dotted; padding:20px 0; overflow: } #con ul li a{ float:left; border:1px #333333 solid; padding:2px;} #con ul li p{ margin-left:68px;line-height:1.5; padding:10px;} --> </p> <ul> <li> <p class="vright">第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。<br /> 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。<br /> 作相思。 </p> </li> <li> <p class="vright">第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。<br /> 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。<br /> 第五最好不相爱， 不相对，如此便可不相会。<br /> 第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。<br /> 第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。<br /> 但曾相见便相知，相见何如不见时。安得与君相诀绝，免教生死作相思。 </p> </li> <li> <p class="vright">第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。<br /> 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。<br /> 第五最好不相爱，如此便可不相弃。 第六最好不相对，如此便可不相会。<br /> 第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。<br /> 第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。<br /> 但曾相见便相知，相见何如不见时。安得与君相诀绝，免教生死作相思。 </p> </li> <li> <p class="vright">第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。<br /> 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。<br /> 第五最好不相爱，如此便可不相弃。 第六最好不相对，如此便可不相会。<br /> 第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。<br /> 第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。<br /> 但曾相见便相知，相见何如不见时。安得与君相诀绝，免教生死作相思。 </p> </li> </ul> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
这个是JavaScript：
</p> <p><title>tweets-slide</title> </p> <p>ul, li {margin:0; padding:0;list-style:none}<br /> body {<br /> margin: 0;<br /> height: 100%;<br /> background: #333;<br /> }<br /> .wp {<br /> position: relative;<br /> width: 800px;<br /> height: 400px;<br /> overflow: hidden;<br /> margin: 20px auto;<br /> border: 4px solid #121212;<br /> background: #fff;<br /> }<br /> .slider {<br /> position: absolute;<br /> width: 760px;<br /> padding: 0 20px;<br /> left:0;<br /> top: 0;<br /> }<br /> .fl {float:left}<br /> .slider img {display:block; padding: 2px; border: 1px solid #ccc}<br /> .slider li {padding: 20px 0; border-bottom: 1px dashed #ccc;overflow:hidden;width:100%}<br /> .slider p {font-size: 12px;margin:0;padding-left:68px;color:#333;line-height:20px;} </p> <ul id="slider" class="slider"> <li> <p>曾虑多情损梵行<br /> 　　<br /> 入山又恐别倾城<br /> 　　<br /> 世间安得双全法<br /> 　　<br /> 不负如来不负卿</p> </li> <li> <p>第一最好不相见，如此便可不相恋。<br /> 第二最好不相知，如此便可不相思。</p> <p>第三最好不相伴，如此便可不相欠。<br /> 第四最好不相惜，如此便可不相忆。</p> <p>第五最好不相爱，如此便可不相弃。<br /> 第六最好不相对，如此便可不相会。 </p> <p>第七最好不相误，如此便可不相负。<br /> 第八最好不相许，如此便可不相续。</p> <p>第九最好不相依，如此便可不相偎。<br /> 第十最好不相遇，如此便可不相聚。</p> <p>但曾相见便相知，相见何如不见时。<br /> 安得与君相诀绝，免教生死作相思。</p> </li> <li> <p>那一天<br /> 闭目在经殿香雾中<br /> 蓦然听见你颂经中的真言<br /> 那一月<br /> 我摇动所有的转经筒<br /> 不为超度<br /> 只为触摸你的指尖<br /> 那一年<br /> 磕长头匍匐在山路<br /> 不为觐见<br /> 只为贴着你的温暖<br /> 那一世<br /> 转山转水转佛塔啊<br /> 不为修来生<br /> 只为途中与你相见<br /> 只是<br /> 就在那一夜<br /> 我忘却了所有<br /> 抛却了信仰<br /> 舍弃了轮回<br /> 只为那<br /> 曾在佛前哭泣的玫瑰<br /> 早已失去旧日的光泽 </p> </li> <li> <p>班扎古鲁白玛的沉默<br /> 　　　　 你见 或者不见我<br /> 　　　　 我就在那里<br /> 　　　　 不悲不喜<br /> 　　　　<br /> 　　　　 你念 或者不念我<br /> 　　　　 情就在那里<br /> 　　　　 不来不去<br /> 　　　　<br /> 　　　　 你爱 或者不爱我<br /> 　　　　 爱就在那里<br /> 　　　　 不增不减<br /> 　　　　<br /> 　　　　 你跟 或者不跟我<br /> 　　　　 我的手就在你手里<br /> 　　　　 不舍不弃<br /> 　　　　<br /> 　　　　 来我的怀里<br /> 　　　　 或者<br /> 　　　　 让我住进你的心间<br /> 　　　　 默然 相爱<br /> 　　　　 寂静 欢喜 </p> </li> </ul> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
两种代码比较，很显然，Jquery的代码简单明了，强力推荐！

您可能感兴趣的文章:

• 彻底搞懂JS无缝滚动代码
• div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
• js 实现无缝滚动 兼容IE和FF
• js向上无缝滚动,网站公告效果 具体代码
• jcarousellite.js 基于Jquery的图片无缝滚动插件
• js实现图片无缝滚动特效
• 走马灯效果代码js appendChild实现的无缝滚动
• Javascript 实现图片无缝滚动
• JS左右无缝滚动（一般方法+面向对象方法）
• js实现文字列表无缝滚动效果