以梦为马，不负韶华。

导航

jQuery写闪烁的星星 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>闪烁星星</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .main{
                margin: 0 auto;
                width: 100%;
                height: 700px;
                position: relative;
                background-color: #333;            
            }
            .main span{
                background: url(../img/shanshuoxingxing/star.png);
                width: 16px;
                height: 21px;
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
        <div class="main">
            
        </div>
    </body>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script>
        $(function(){
            var len=100        //设定星星的个数
            for(var i=0;i<len;i++){
                var x=Math.floor(Math.random()*$('.main').innerWidth())+'px'
                var y=Math.random()*$('.main').innerHeight()+'px'
                $('.main').append("<span style='left:"+x+";top:"+y+"'></span>")
                hide()
                // show()
            }
            function hide(){
                $('.main span').animate({opacity:0},100,function(){
                    show()
                })
            }
            function show(){
                $('.main span').animate({opacity:1},50,function(){
                    hide()
                })
            }
        })
        
    </script>
</html>

posted on 2020-06-04 14:39  小冉哥、  阅读(555)  评论(0)    收藏  举报