Js实现跟随鼠标移动的小球------Sestid

我会带着你远行 2024-04-18 21:53 69阅读 0赞

以下就是全部代码（纯Js）

<!DOCTYPE html>
    <html>
    <head>
        <title>follow mouse</title>
    </head>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        #div1{
        	width: 50px;
        	height: 50px;
       		border-radius: 50%;
        	background: red;
        	color:#fff;
        	text-align: center;
        	line-height: 50px; 
        	position: absolute;
        	transition: all 0.5s; }
        #div2{
        	width: 50px;
        	height: 50px;
        	border-radius: 50%;
        	background: green;
        	color:#fff;
        	text-align: center;
        	line-height: 50px;
        	position:absolute;
        	transition: all 0.5s; }
    
        .box1{
            width: 100%;
            height: 400px;
            border: 1px solid #ccc;
        }
        .box2{
            width: 100%;
            height: 400px;
            border: 1px solid #ccc;
            }
    </style>
    
    <body>
        <div class="box1" onmousemove="b1()">
            <div id="div1" >1</div>
        </div>
        <div class="box2" onmousemove="b2()">
            <div id="div2">2</div>
        </div>
    </body>
    <script type="text/javascript">
        function b1(ev) {
            var oEvent = ev || event;
            var oDiv = document.getElementById('div1');
            if( oEvent.clientX<1350&&oEvent.clientY<350){
            oDiv.style.left = oEvent.clientX + 'px';
            oDiv.style.top = oEvent.clientY + 'px';
            }
    
        }
       function b2(ev){
            var oEvent=ev||event;
            var oDiv=document.getElementById('div2');
            if( oEvent.clientX<350&&oEvent.clientY<750){
               oDiv.style.left=oEvent.clientX+'px';
               oDiv.style.top=oEvent.clientY+'px';
            }
        }
    </script>
    </html>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/cd7f92ffbedb4587b644c7606cf1590d.png