CSS+JS模仿新浪微博大厅文字滚动特效-文本操作-代码家园

<!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模仿新浪微博大厅文字<a href='http://www.daimajiayuan.com/list-97.html' target='_blank'><u>滚动效果</u></a></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模仿新浪微博大厅文字滚动特效

相关代码