zoukankan      html  css  js  c++  java
  • _鼠标移动跟随效果

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>_鼠标移动跟随效果</title>
    <style>
    div {
    50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    text-align: center;
    font-size: 30px;
    color: #fff;
    }
    </style>
    <script>
    //让第一个盒子直接跟随鼠标位置
    //后面的盒子每隔几毫米跟随前一个盒子变化位置
    window.onload = function(){
    var allDiv = document.getElementsByTagName("div");//div数组
    document.onmousemove = function(e){
    e = e || window.event;//兼容性
    allDiv[0].style.top = e.clientY + "px";
    allDiv[0].style.left = e.clientX + "px";
    }
    //设置定时器
    setInterval(function(){
    for(var i=allDiv.length-1;i>0;i--){
    allDiv[i].style.top = allDiv[i-1].style.top;
    allDiv[i].style.left = allDiv[i-1].style.left;
    allDiv[i].style.backgroundColor = randomColor();
    }
    },20)
    //设置随机颜色
    function randomColor(){
    var str = "0123456789abcdef";
    var bgColor = "#";
    for(var i = 0;i<6;i++){
    var temp = parseInt(str.length*Math.random());
    bgColor += temp;
    }
    return bgColor;
    }
    }

    </script>



    </head>
    <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div>20</div>
    <div>21</div>
    <div>22</div>
    <div>23</div>
    <div>24</div>
    <div>25</div>
    <div>26</div>
    <div>27</div>
    <div>28</div>
    <div>29</div>
    <div>30</div>
    <div>31</div>
    <div>32</div>
    <div>33</div>
    <div>34</div>
    <div>35</div>
    <div>36</div>
    <div>37</div>
    <div>38</div>
    <div>39</div>
    <div>40</div>
    <div>41</div>
    <div>42</div>
    <div>43</div>
    <div>44</div>
    <div>45</div>
    <div>46</div>
    <div>47</div>
    <div>48</div>
    <div>49</div>
    <div>50</div>
    </body>
    </html>

  • 相关阅读:
    Go语言学习资源
    优秀编程学习网站
    我对架构的理解
    【转】TCP协议中的三次握手和四次挥手(图解)
    【转】asp.net c# 网上搜集面试题目大全(附答案)
    spring framework 4 源码阅读
    浮点类型
    把二元查找树转变成排序的双向链表
    用模板写快速排序-链表
    用模板写快速排序-数组
  • 原文地址:https://www.cnblogs.com/R-jia-bao/p/6165863.html
Copyright © 2011-2022 走看看