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

　　首先是Jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.4.2%2Fjquery.min.js%22%3E%3C%2Fscript%3E"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%3E%20%0D%0A%24(function()%7B%20%0D%0Avar%20scrtime%3B%20%0D%0A%24(%22%23con%22).hover(function()%7B%20%0D%0AclearInterval(scrtime)%3B%20%0D%0A%0D%0A%7D%2Cfunction()%7B%20%0D%0A%0D%0Ascrtime%20%3D%20setInterval(function()%7B%20%0D%0Avar%20%24ul%20%3D%20%24(%22%23con%20ul%22)%3B%20%0D%0Avar%20liHeight%20%3D%20%24ul.find(%22li%3Alast%22).height()%3B%20%0D%0A%24ul.animate(%7BmarginTop%20%3A%20liHeight%2B40%20%2B%22px%22%7D%2C1000%2Cfunction()%7B%20%0D%0A%0D%0A%24ul.find(%22li%3Alast%22).prependTo(%24ul)%20%0D%0A%24ul.find(%22li%3Afirst%22).hide()%3B%20%0D%0A%24ul.css(%7BmarginTop%3A0%7D)%3B%20%0D%0A%24ul.find(%22li%3Afirst%22).fadeIn(1000)%3B%20%0D%0A%7D)%3B%20%0D%0A%7D%2C3000)%3B%20%0D%0A%0D%0A%7D).trigger(%22mouseleave%22)%3B%20%0D%0A%0D%0A%0D%0A%7D)%3B%20%0D%0A%3C%2Fscript%3E"> 
<style type="text/css"> 
 
</style> 
<body> 
<div id="con"> 
<ul> 
<li> <a href="http://www.baidu.com" _ewebeditor_ta_href="http%3A%2F%2Fwww.baidu.com"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" _ewebeditor_ta_src="http%3A%2F%2Ftp3.sinaimg.cn%2F1696357270%2F50%2F1282628065%2F1" /></a> 
<p class="vright">第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。 
第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。 
作相思。 </p> 
</li> 
<li> <a href="#" _ewebeditor_ta_href="%23"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" _ewebeditor_ta_src="http%3A%2F%2Ftp3.sinaimg.cn%2F1696357270%2F50%2F1282628065%2F1" /></a> 
<p class="vright">第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。 
第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。 
第五最好不相爱， 不相对，如此便可不相会。 
第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。 
第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。 
但曾相见便相知，相见何如不见时。安得与君相诀绝，免教生死作相思。 </p> 
</li> 
<li> <a href="#" _ewebeditor_ta_href="%23"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" _ewebeditor_ta_src="http%3A%2F%2Ftp3.sinaimg.cn%2F1696357270%2F50%2F1282628065%2F1" /></a> 
<p class="vright">第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。 
第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。 
第五最好不相爱，如此便可不相弃。 第六最好不相对，如此便可不相会。 
第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。 
第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。 
但曾相见便相知，相见何如不见时。安得与君相诀绝，免教生死作相思。 </p> 
</li> 
<li> <a href="#" _ewebeditor_ta_href="%23"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" _ewebeditor_ta_src="http%3A%2F%2Ftp3.sinaimg.cn%2F1696357270%2F50%2F1282628065%2F1" /></a> 
<p class="vright">第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。 
第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。 
第五最好不相爱，如此便可不相弃。 第六最好不相对，如此便可不相会。 
第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。 
第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。 
但曾相见便相知，相见何如不见时。安得与君相诀绝，免教生死作相思。 </p> 
</li> 
</ul> 
</div> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　这个是JavaScript：

<!doctype html> 
<html> 
<head> 
<title>tweets-slide</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
ul, li {margin:0; padding:0;list-style:none} 
body { 
margin: 0; 
height: 100%; 
background: #333; 
} 
.wp { 
position: relative; 
width: 800px; 
height: 400px; 
overflow: hidden; 
margin: 20px auto; 
border: 4px solid #121212; 
background: #fff; 
} 
.slider { 
position: absolute; 
width: 760px; 
padding: 0 20px; 
left:0; 
top: 0; 
} 
.fl {float:left} 
.slider img {display:block; padding: 2px; border: 1px solid #ccc} 
.slider li {padding: 20px 0; border-bottom: 1px dashed #ccc;overflow:hidden;width:100%} 
.slider p {font-size: 12px;margin:0;padding-left:68px;color:#333;line-height:20px;} 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20H%24(i)%20%7Breturn%20document.getElementById(i)%7D%20%0D%0Afunction%20H%24(c%2C%20p)%20%7Breturn%20p.getElementsByTagName(c)%7D%20%0D%0Avar%20slider%20%3D%20function%20()%20%7B%20%0D%0Afunction%20init%20(o)%20%7B%20%0D%0Athis.id%20%3D%20o.id%3B%20%0D%0Athis.at%20%3D%20o.auto%20%3F%20o.auto%20%3A%203%3B%20%0D%0Athis.o%20%3D%200%3B%20%0D%0Athis.pos()%3B%20%0D%0A%7D%20%0D%0Ainit.prototype%20%3D%20%7B%20%0D%0Apos%20%3A%20function%20()%20%7B%20%0D%0AclearInterval(this.__b)%3B%20%0D%0Athis.o%20%3D%200%3B%20%0D%0Avar%20el%20%3D%20H%24(this.id)%2C%20li%20%3D%20H%24('li'%2C%20el)%2C%20l%20%3D%20li.length%3B%20%0D%0Avar%20_t%20%3D%20li%5Bl-1%5D.offsetHeight%3B%20%0D%0Avar%20cl%20%3D%20li%5Bl-1%5D.cloneNode(true)%3B%20%0D%0Acl.style.opacity%20%3D%200%3B%20cl.style.filter%20%3D%20'alpha(opacity%3D0)'%3B%20%0D%0Ael.insertBefore(cl%2C%20el.firstChild)%3B%20%0D%0Ael.style.top%20%3D%20-_t%20%2B%20'px'%3B%20%0D%0Athis.anim()%3B%20%0D%0A%7D%2C%20%0D%0Aanim%20%3A%20function%20()%20%7B%20%0D%0Avar%20_this%20%3D%20this%3B%20%0D%0Athis.__a%20%3D%20setInterval(function()%7B_this.animH()%7D%2C%2020)%3B%20%0D%0A%7D%2C%20%0D%0AanimH%20%3A%20function%20()%20%7B%20%0D%0Avar%20_t%20%3D%20parseInt(H%24(this.id).style.top)%2C%20_this%20%3D%20this%3B%20%0D%0Aif%20(_t%20%3E%3D%20-1)%20%7B%20%0D%0AclearInterval(this.__a)%3B%20%0D%0AH%24(this.id).style.top%20%3D%200%3B%20%0D%0Avar%20list%20%3D%20H%24('li'%2CH%24(this.id))%3B%20%0D%0AH%24(this.id).removeChild(list%5Blist.length-1%5D)%3B%20%0D%0Athis.__c%20%3D%20setInterval(function()%7B_this.animO()%7D%2C%2020)%3B%20%0D%0A%2F%2Fthis.auto()%3B%20%0D%0A%7Delse%20%7B%20%0D%0Avar%20__t%20%3D%20Math.abs(_t)%20-%20Math.ceil(Math.abs(_t)*.07)%3B%20%0D%0AH%24(this.id).style.top%20%3D%20-__t%20%2B%20'px'%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0AanimO%20%3A%20function%20()%20%7B%20%0D%0Athis.o%20%2B%3D%202%3B%20%0D%0Aif%20(this.o%20%3D%3D%20100)%20%7B%20%0D%0AclearInterval(this.__c)%3B%20%0D%0AH%24('li'%2CH%24(this.id))%5B0%5D.style.opacity%20%3D%201%3B%20%0D%0AH%24('li'%2CH%24(this.id))%5B0%5D.style.filter%20%3D%20'alpha(opacity%3D100)'%3B%20%0D%0Athis.auto()%3B%20%0D%0A%7Delse%20%7B%20%0D%0AH%24('li'%2CH%24(this.id))%5B0%5D.style.opacity%20%3D%20this.o%2F100%3B%20%0D%0AH%24('li'%2CH%24(this.id))%5B0%5D.style.filter%20%3D%20'alpha(opacity%3D'%2Bthis.o%2B')'%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0Aauto%20%3A%20function%20()%20%7B%20%0D%0Avar%20_this%20%3D%20this%3B%20%0D%0Athis.__b%20%3D%20setInterval(function()%7B_this.pos()%7D%2C%20this.at*1000)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Areturn%20init%3B%20%0D%0A%7D()%3B%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<div class="wp"> 
<ul id="slider" class="slider"> 
<li><a class="fl" href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B"><img src="http://pic.cnblogs.com/face/u160412.jpg" _ewebeditor_ta_src="http%3A%2F%2Fpic.cnblogs.com%2Fface%2Fu160412.jpg" alt="" /></a> 
<p>曾虑多情损梵行 
　　 
入山又恐别倾城 
　　 
世间安得双全法 
　　 
不负如来不负卿</p> 
</li> 
<li><a class="fl" href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B"><img src="http://pic.cnblogs.com/face/u160412.jpg" _ewebeditor_ta_src="http%3A%2F%2Fpic.cnblogs.com%2Fface%2Fu160412.jpg" alt="" /></a> 
<p>第一最好不相见，如此便可不相恋。 
第二最好不相知，如此便可不相思。
 
第三最好不相伴，如此便可不相欠。 
第四最好不相惜，如此便可不相忆。
 
第五最好不相爱，如此便可不相弃。 
第六最好不相对，如此便可不相会。 
 
第七最好不相误，如此便可不相负。 
第八最好不相许，如此便可不相续。
 
第九最好不相依，如此便可不相偎。 
第十最好不相遇，如此便可不相聚。
 
但曾相见便相知，相见何如不见时。 
安得与君相诀绝，免教生死作相思。</p> 
</li> 
<li><a class="fl" href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B"><img src="http://pic.cnblogs.com/face/u160412.jpg" _ewebeditor_ta_src="http%3A%2F%2Fpic.cnblogs.com%2Fface%2Fu160412.jpg" alt="" /></a> 
<p>那一天 
闭目在经殿香雾中 
蓦然听见你颂经中的真言 
那一月 
我摇动所有的转经筒 
不为超度 
只为触摸你的指尖 
那一年 
磕长头匍匐在山路 
不为觐见 
只为贴着你的温暖 
那一世 
转山转水转佛塔啊 
不为修来生 
只为途中与你相见 
只是 
就在那一夜 
我忘却了所有 
抛却了信仰 
舍弃了轮回 
只为那 
曾在佛前哭泣的玫瑰 
早已失去旧日的光泽 
</p> 
</li> 
<li><a class="fl" href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B"><img src="http://pic.cnblogs.com/face/u160412.jpg" _ewebeditor_ta_src="http%3A%2F%2Fpic.cnblogs.com%2Fface%2Fu160412.jpg" alt="" /></a> 
<p>班扎古鲁白玛的沉默 
　　　　 你见 或者不见我 
　　　　 我就在那里 
　　　　 不悲不喜 
　　　　 
　　　　 你念 或者不念我 
　　　　 情就在那里 
　　　　 不来不去 
　　　　 
　　　　 你爱 或者不爱我 
　　　　 爱就在那里 
　　　　 不增不减 
　　　　 
　　　　 你跟 或者不跟我 
　　　　 我的手就在你手里 
　　　　 不舍不弃 
　　　　 
　　　　 来我的怀里 
　　　　 或者 
　　　　 让我住进你的心间 
　　　　 默然 相爱 
　　　　 寂静 欢喜 
</p> 
</li> 
</ul> 
</div> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Anew%20slider(%7Bid%3A'slider'%7D)%20%0D%0A%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　两种代码比较，很显然，Jquery的代码简单明了，强力推荐！

教程首页更多教程

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

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