Jquery 仿新浪首页信息滚动效果2
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>jQuery仿新浪微博动态效果</title>
? ? <style type="text/css">
? ? ? ? .dongtai {background:#f6f6f6; width:700px;border:1px solid #e2e2e2;height:200px;}
? ? ? ? .dongtai .tit { ? border-bottom:1px solid #ddd;text-indent:20px;background:#c3c3b3;height:40px; line-height:40px;color:#b5c;}
? ? ? ? ul {display:block; ? padding:10px 10px 0; overflow:hidden; position:relative; top:10px;} ? ?
? ? ? ? ul li {display:block; height:50px; border-bottom:1px dashed #808080; background:#f6f6f6 left top no-repeat; padding-top:3px; margin-bottom:10px; *margin-bottom:5px;}
? ? ? ? .con {margin:20px;}
? ? ? ? .con .dongtai {margin:10px 0px;}
? ? </style>
? ? <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js?'></script>
? ? <script type="text/javascript">
? ? ? ? var arr = new Array();
? ? ? ? arr['0'] = '【小猪】：大家好！';
? ? ? ? arr['1'] = '【小牛】：在这里大家可以互相分享技术心得。';
? ? ? ? arr['2'] = '【小狗】：认识大家很高兴啊！';
?
? ? ? ? var qu = arr.length-1;
?
? ? ? ? window.onload = function(){ ? ??
? ? ? ? ? ? put();
? ? ? ? }
?
? ? ? ? function put(){
? ? ? ? ? ? var str = '' ;
? ? ? ? ? ? for(var i=qu;i<arr.length;i++){
? ? ? ? ? ? ? ? ?str += '<li>'+arr[i]+'</li>';
? ? ? ? ? ? }
? ? ? ? ? ? $('#k').html(str);
? ? ? ? ? ? qu--;
? ? ? ? ? ? setInterval('show()',3000);?
? ? ? ? }
?
? ? ? ? function suan(){
? ? ? ? ? ? if(qu<=0){
? ? ? ? ? ? ? ? qu = arr.length-1;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? qu --; ?
? ? ? ? ? ? }
? ? ? ? }
?
? ? ? ? ? ? ? ? // 动画主函数
? ? ? ? function show(){
? ? ? ? ? ? $('#k li:first').before('<li style="display:none;">'+arr[qu]+'</li>'); ?
? ? ? ? ? ? $('#k li:first').slideDown(500);
? ? ? ? ? ? $('#k li:last').animate({ opacity:"0",marginTop:"0"},500,'',function(){$('#k li:last').remove();});
? ? ? ? ? ? suan();?
? ? ? ? }
?
? ? </script>
</head>
<body>
? ? <div class="con">
? ? <div class="info">
? ? ? ? ? ? <h1>jQuery仿新浪微博滚动效果</h1>
?
? ? </div>
? ? <div class='dongtai'>
? ? ? ? <div class='tit'><h3>最新动态</h3></div>
? ? ? ? <ul id="k">
? ? ? ? ? ? 加载中...
? ? ? ? </ul>
? ? </div>
? ? </div>
? ? </body>
</html>
