本文實(shí)例為大家分享了js實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的具體代碼,供大家參考,具體內(nèi)容如下
<!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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注