<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS+JS模仿新浪微博大厅文字滚动效果</title> <style> *{ margin:0; padding:0; font-size:12px;} ul{ width:300px; height:400px; overflow:hidden; margin:50px 0 0 100px;} li{ width:300px; border-bottom:1px solid #eee; margin-bottom:20px;} h4{border-bottom:1px solid #eee;} </style> </head> <body> <ul> <li><h4>1.广安市区发生多起抢劫事件</h4><p>近期,广安市区晚上发生多起抢劫事件,城南以万盛街附近为主,城北以人工湖附近为主,事件从晚上八点至凌晨两点。</p><p>2分钟前</p></li> <li><h4>2.30城市房价增高进7成</h4><p>【逛北京路必备】仅25元,享原价80元的市一宫电影城单人通票一张!2D、3D全场劲爆通兑!不限时段、不限场次、不限影片,观看最新上映大片!</p><p>2分钟前</p></li> <li><h4>3.李玮峰进球了</h4><p>“我是人大代表,明天就叫你统统下岗!”一个刚刚撞了7辆车,撞死了1个人,毫无悔意,还在叫嚣……</p><p>2分钟前</p></li> <li><h4>4.刚吃饱了饭</h4><p>【华农月饼】酸奶只是浮云!人类已经不能阻止#华农食品#的发扬光大了。中秋快到了~~各位同学准备好月饼了吗?</p><p>2分钟前</p></li> <li><h4>5.吃早餐都中毒了</h4><p>结束了十多天安排的旅行到达成都机场,这次旅行总体上安排时间太紧,目的性太强,看的景点太多,许多景点需要以后再来慢慢体会。</p><p>2分钟前</p></li> <li><h4>6.吃早餐都中毒了</h4><p>我觉得除非极其特殊的情况,一个人在进入企业后至少待够三年,不要跳来跳去。</p><p>2分钟前</p></li> </ul> <script> var b=window.b||{}; b.roll=function (){ var me=this; setTimeout(function(){ me.x=document.getElementsByTagName("ul"); me.y=document.getElementsByTagName("li"); me.z=me.y.item(me.y.length-1); me.q=me.z.clientHeight; me.z.style.opacity=0; me.z.style.filter="alpha:(opacity=0)"; me.z.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+0+")"; me.z.style.height="0px"; me.x[0].insertBefore(me.z,me.y[0]); me.t=1; me.c=0 me.i=setInterval(function(){ me.t++; me.z.style.height=Math.round(me.q*(me.t/50)*(me.t/50))+"px"; if(me.t>=50){ clearInterval(me.i); me.d=setInterval(function(){ me.c+=0.02 if("\v"=="v"){ me.z.style.filter="alpha:(opacity="+me.c*100+")"; me.z.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+me.c*100+")"; } me.z.style.opacity=me.c; if(me.c>=1){ clearInterval(me.d);} },50) } },25) b.roll(); },5000); } new b.roll(); </script> </body> </html> <br><br><hr> 收集于互联网,只为兴趣与学习交流,不作商业用途。来源:源码爱好者</font></p> 运行代码 复制代码 另存代码 提示:可以先修改部分代码后再运行 转载请注明:代码家园 » CSS+JS模仿新浪微博大厅文字滚动特效 继续浏览有关 的文章 上一篇:基于jquery实现点击链接变色,点击文字变色 下一篇:jQuery版动画特效文字链接鼠标悬停提示 相关代码 另类的动画特效的文字链接鼠标悬停提示特效 JS实现很酷的水波文字特效 JS实现文字链接感应鼠标淡入淡出改变颜色 JS实现文字放大特效 + 纯CSS实现的文字倒影特效 + JS配合CSS实现的文字炫彩+阴影特效 + JS文字渐显溶解特效动态切换 + flash特效动态滚动渐变文字特效 + JS函数控制超链接必须先点击一款链接后才能点击 + CSS+JS模仿新浪微博大厅文字滚动特效 + jQuery版动画特效文字链接鼠标悬停提示 + JS+CSS代码简洁的无间断文字向上滚动切换特效 + JS实现的可爱跳动文字特效,代码有些复杂 + JavaScript实现的动态文字特效 + jQuery插件版文字轮流滚动,一步一停 + 插入上标和下标的代码