js实现跟随鼠标移动的小球

2019-11-19 10:58:13

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js实现跟随鼠标移动的具体代码，供大家参考，具体内容如下

<!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>