雪花跟随鼠标移动

  <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编辑  收藏  举报