zoukankan      html  css  js  c++  java
  • 鼠标移动出自己想要的效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js 事件event</title>
        <style>
            div{
                width: 10px;
                height: 10px;
                background: red;
                color: #fff;
                padding: 10px;
                margin-right: 10px;
                position: absolute;   /*这个是关键*/
            }
        </style>
        <script>
           function getpos(ev){
                  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
                  var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
    
                  return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop}
           }
    
    
            //效果是样式跟着鼠标的移动而移动
            document.onmousemove=function(ev) {  //鼠标移动
                
                var oDiv=document.getElementsByTagName("div");
                var oEvent=ev||event;
                
                var pos =getpos(oEvent)
               for(var i = oDiv.length-1;i>0;i--){
                  oDiv[i].style.left=oDiv[i-1].offsetLeft+"px";
                  oDiv[i].style.top=oDiv[i-1].offsetTop+"px";
    
               }
               oDiv[0].style.left=pos.x+"px";
               oDiv[0].style.top=pos.y+"px";
    
    
            }
        </script>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    </body>
    </html>
  • 相关阅读:
    (1)李宏毅深度学习-----机器学习简介
    Git命令之不得不知的git stash暂存命令
    Http2升级方案调研
    神奇的 SQL 之别样的写法 → 行行比较
    熔断机制
    限流算法
    状态机
    布隆过滤器
    负载均衡算法
    K8S Ingress
  • 原文地址:https://www.cnblogs.com/quitpoison/p/9901225.html
Copyright © 2011-2022 走看看