JS实现的新浪微博大厅文字内容滚动效果代码

本文描述了用JS实现的新浪微博大厅的文本内容滚动效果代码。分享给大家参考，如下：

新浪微博大厅滚动推文-幻灯片，用JavaScript实现。这几天好像很多朋友都需要这个功能，前几天已经发了好几个。但是今天发现这个模式更好，不敢一个人享受。希望有需要的朋友喜欢。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/js-Sina-txt-scroll-tweets-slide-codes/

具体代码如下：

！doctype htmlhtmlheadtitle新浪微博大厅滚动推文-幻灯片/标题元http-equiv=' Content-type ' Content=' text/html；charset=utf-8 '/style type=' text/CSS ' ul，li { margin:0划水：0;列表样式：无}正文{边距： } 0；高度： 100%;背景技术： # 333;}.wp {位置：相对；宽度： 800像素；高度： 400像素；飞越：隐藏；余量： 20px自动；border: 4px固体# 121212;背景# fff}。滑块{位置：绝对值；宽度： 760像素；padd : 0 20pxleft :0 top : 0；}.fl {float:left} .滑块img { display : blockpadd : 2px border : 1px固体#ccc} .滑块Li { padd : 20px 0；边框-底部： 1px虚线# ccc飞越：隐藏；宽度：100%}。滑块p { font-size : 12px余量：0左填充left:68pxcolor: # 333线高：20 px}/style脚本类型=' text/JavaScript '函数H $(I){返回文档。getelementbyid(I)}函数H $ $(c，p){ return p . getelementsbytagname(c)} var slider=function(){ function init(o){ this。id=o . idthis.at=o.auto？o . auto : 3；这个。o=0；这个。pos()；} init。prototype={ pos : function(){ clearInterval(这个._ _ b)；这个。o=0；var el=H$(this.id)，li=H$$('li '，el)，l=li.lengthvar _t=li[l-1].偏右；var cl=li[l-1].克隆代码（真);cl.style。不透明度=0;cl.style.filter='alpha(不透明度=0 ';el.insertBefore(cl，el。第一个孩子)；埃尔。风格。top=-_ t ' px '；这个。anim()；}，anim : function(){ var _ this=this；这个_ _ a=SetInterval(function(){ _ this。animh()}，20)；}，animH :函数(){ var _ t=parsent(H $(this。id)。风格。top)，_ this=this if(_ t=-1){ clearInterval(这个_ _ a)；h $(这个。id)。风格。top=0；var列表=H$$('li '，H$(这个。id))；H$(this.id).移除子(列表[list。length-1])；这个_ _ c=SetInterval(function(){ _ this。AnMo()}，20)；//这个。auto()；} else { var _ _ t=math。ABS(_ t)-数学。天花板(数学。ABS(_ t)*。07);h $(这个。id)。风格。top=-_ _ t ' px '；} }，animO :函数(){这个。o=2；如果(这个。o==100){ clearInterval(这个._ _ c)；H$$('li '，H$(这个。id))[0]。风格。不透明度=1；H$$('li '，H$(这个。id))[0]。风格。filter=' alpha(不透明度=100 ';这个。auto()；}else { H$$('li ')，H$(这个。id))[0]。风格。不透明度=这个。o/100；H$$('li '，H$(这个。id))[0]。风格。filter=' alpha(不透明度='这个。o ')'；} }，auto : function(){ var _ this=this；这个_ _ b=SetInterval(function(){ _ this。pos()}，这个。在* 1000)；} }返回init }()；/script/headdydiv class=' WP ' ul id=' slider ' class=' slider ' lia class=' fl ' href=' JavaScript :'img src=' http : images/u 160412。jpg ' alt=' '//a p曾虑多情损梵行入山又恐别倾城世间安得双全法不负如来不负卿/p/Li lia class=' fl ' href=' JavaScript :'img src=' http : images/u 160412。jpg ' alt=' '//a p第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思br/第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆br/第五最好不相爱，如此便可不相弃/Li lia class=' fl ' href=' JavaScript :'img src=' http : images/u 160412。jpg ' alt=' '//a p人生若只如初见，何事秋风悲画扇。等闲变却故人心，却道故人心易变br/骊山语罢清宵半，泪雨零铃终不怨。何如薄幸锦衣郎，比翼连枝当日愿/p/Li lia class=' fl ' href=' JavaScript :'img src=' http : images/u 160412。jpg ' alt=' '//a p今天天气不错，我们都出来郊游了，可不一会就下起了雨，都淋湿了，但心情很爽噢br/必竟我们不怎么出来玩，一出来就碰到了雨，很荣幸哦！/p/Li/ul/div脚本类型=' text/JavaScript '新滑块({ id : ' slider ' })/脚本/正文/html希望本文所述对大家Java脚本语言程序设计有所帮助。