<!DOCTYPE html> <html> <head> <title>follow mouse</title> </head> <style type="text/css"> *{ margin: 0; padding:0; } #div1{width: 50px;height: 50px;background: red;color:#fff;text-align: center;line-height: 50px; position: absolute;transition: all 0.5s; } #div2{width: 50px;height: 50px;background: green;color:#fff;text-align: center;line-height: 50px;position: absolute;transition: all 0.5s; } .box1{ width: 400px; height: 400px; border: 1px solid #ccc; } .box2{ width: 400px; 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<350&&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>
