跟随鼠标的div

最新推荐文章于 2022-10-25 12:04:46 发布

weixin_30680385

最新推荐文章于 2022-10-25 12:04:46 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/java-7/p/8689989.html

本文介绍了如何使用HTML和JavaScript创建跟随鼠标移动的DIV元素，包括单个DIV及多个DIV链式跟随的效果实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跟随鼠标的div

一个跟随鼠标的div：

<DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>跟随鼠标的div</title>  
    <style type="text/css">
        #div1{
         width: 100px;
         height: 100px;
         background-color: yellow;
        position: absolute;
        }
    </style> 
    <script>      
           document.onmousemove=function(ev){
              var oEVent=ev||event;
              var oDiv=document.getElementById("div1");
              var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
              var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
              oDiv.style.top=oEVent.clientY+scrolltop+"px";
              oDiv.style.left=oEVent.clientX+scrollLeft+"px";
           }
   </script>
</head>  
<body style="height: 2000px"> 
  
   <div id="div1">
      
   </div>   
</body>

一串跟随鼠标的div：

将定位做成绝对定位，后面一个diiv永远跟着前面一个走。

<DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>跟随鼠标的div</title>  
    <style type="text/css">
    div{
        width:10px;
        height:10px;
        background-color:red;
        position: absolute;
    }
    </style> 
    <script>    
            var divs=document.getElementsByTagName("div"); 
            
            document.onmousemove=function(ev){
              var oEVent=ev||event;
              for(var i=divs.length-1;i>0;i--){
                  divs[i].style.left= divs[i-1].style.left;
                  divs[i].style.top= divs[i-1].style.top;
            }
              divs[0].style.top=oEVent.clientY+"px";
              divs[0].style.left=oEVent.clientX+"px";
           }
   </script>
</head>  
<body style="height: 2000px"> 
   <div></div>   
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div>   
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div>   
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div>   
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div>   
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div>   
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div>   
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div>   
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
    <div></div>   
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div>   
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div>   
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div>   
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div>   
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div>   
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div>   
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div>   
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
</body>