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>
  • 相关阅读:
    mysql重启.....
    tomcat双向认证
    tomcat单向认证
    tomcat ssi使用
    各种排序
    字符转换
    threeSum问题
    求出0~999之间的所有“水仙花数”并输出
    动态规划
    迷惑一天的代码
  • 原文地址:https://www.cnblogs.com/quitpoison/p/9901225.html
Copyright © 2011-2022 走看看