JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码

Java脚本语言实现仿新浪微博大厅和未登录腾讯微博首页滚动效果，貌似这些天有不少朋友需要这功能，前几天已经发了几个了，不过那一个效果是用jquery实现的《jQuery向上循环滚动（仿新浪微博未登录首页滚动微博显示）》 ,今天发现这款是射流研究…制作的好，不敢独享，希望需要的朋友喜欢哦。

效果图展示如下：

查看演示源码下载

超文本标记语言代码

div class=' WP ' ul id=' slider ' class=' slider ' lia class=' fl ' href=' JavaScript :'img src=' http :3358 t1。qlogo。C4 ca 63961 bace 88/50 ' alt=' '//AP入山又恐别倾城世间安得双全不负如来不负卿/p/lilia class=' fl ' href=' JavaScript :'img src=' http :3358 t1。qlogo。C4 ca 63961 bace 88/50 ' alt=' '//AP第一最好不相见，如此便可不相恋/p/lilia class=' fl ' href=' JavaScript :'img src=' http :3358 t1。qlogo。C4 ca 63961 bace 88/50 ' alt=' '//AP那一天闭目在经殿香雾/p/lilia class=' fl ' href=' JavaScript :'img src=' http :3358 t1。qlogo。C4 ca 63961 bace 88/50 ' alt=' '//AP你见或者不见我我就在那里/p/Li/ul/div脚本类型=' text/JavaScript '新滑块({ id : ' slider ' })/脚本CSS代码

ul，li { margin:0划水：0;列表样式： none } a { color : # fff}车身{ margin:0高度：100%;背景技术： # 333;}.wp {位置：相对；宽度宽度：800像素高度：400 px飞越：隐藏；余量：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}js代码

函数H $(I){返回文档。getelementbyid(I)}函数H$$(c，p){ return p . getelementsbytagname(c)} var slider=function(){ function inits(o){ this。id=o . idthis.at=o.auto？o . auto : 3；这个。o=0；这个。pos()；警报(o)；} inits。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)；} }返回inits }()；以上内容就是小编给大家分享的Java脚本语言实现仿新浪微博大厅和腾讯微博首页滚动特效源码，希望大家喜欢。