雪花跟随鼠标移动 

　　<body>
　　　　　<div class="box">*</div>
        <div class="box">*</div>
        <div class="box">*</div>
        <div class="box">*</div>
        <div class="box">*</div>
        <div class="box">*</div>
        <div class="box">*</div>
        <div class="box">*</div>
        <div class="box">*</div>
        <div class="box">*</div>
        <div class="box">*</div>
        <div class="box">*</div>
        <div class="box">*</div>
        
        
    </body>
<style type="text/css">
    .box{
        position: absolute;
        left:0;
        top:0;
        z-index: 10;
        color:red;
        font-size:24px;
    }
</style>
<script type="text/javascript">
    window.onload = function() {
        var obox = document.querySelectorAll('.box');
        document.onmousemove = function(e){
            var e = e || window.event;
//            获取鼠标位置
//            e.clientX
//            e.clientY
从最后一位开始移动

            for(var i = obox.length-1; i>0; i--){
                obox[i].style.left = obox[i-1].offsetLeft + 'px';
                obox[i].style.top = obox[i-1].offsetTop + 'px';
            }
            obox[0].style.left = e.clientX + 'px';
            obox[0].style.top = e.clientY + 'px';
        }
}
<script>

 

 

　　

posted @ 2018-06-14 09:26  adongP  阅读(383)  评论(0)  编辑  收藏  举报