`

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>

分享到：
| Jquery 仿新浪首页信息滚动效果1
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics