js實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的小球
更新時(shí)間：2019年08月26日 09:05:53 作者：Vam的金豆之路
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的小球，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript+canvas實(shí)現(xiàn)框內(nèi)跳動(dòng)小球
- JavaScript結(jié)合Canvas繪畫畫運(yùn)動(dòng)小球
- JavaScript canvas實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)小球
- 原生js實(shí)現(xiàn)移動(dòng)小球（碰撞檢測(cè)）
- js實(shí)現(xiàn)小球在頁(yè)面規(guī)定的區(qū)域運(yùn)動(dòng)
- 用js實(shí)現(xiàn)小球的自由移動(dòng)代碼
- JavaScript實(shí)現(xiàn)小球沿正弦曲線運(yùn)動(dòng)
- p5.js入門教程之小球動(dòng)畫示例代碼
- 原生js實(shí)現(xiàn)彈跳小球
- 原生js實(shí)現(xiàn)彈動(dòng)小球效果
相關(guān)文章
這篇文章主要介紹了小程序中手機(jī)號(hào)識(shí)別的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了JavaScript中的全局對(duì)象介紹,對(duì)于任何JavaScript程序,當(dāng)程序開(kāi)始運(yùn)行時(shí),JavaScript解釋器都會(huì)初始化一個(gè)全局對(duì)象以供程序使用,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JS控制彈出懸浮窗口(一覽畫面)的實(shí)例代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)吸頂盒效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
詳解XMLHttpRequest（一）同步請(qǐng)求和異步請(qǐng)求
這篇文章主要為大家詳細(xì)介紹了XMLHttpRequest 同步請(qǐng)求和異步請(qǐng)求,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
使用Javascript開(kāi)發(fā)sliding-nav帶滑動(dòng)條效果的導(dǎo)航插件
這篇文章主要介紹了使用Javascript開(kāi)發(fā)sliding-nav帶滑動(dòng)條效果的導(dǎo)航插件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
Bootstrap Navbar Component實(shí)現(xiàn)響應(yīng)式導(dǎo)航
這篇文章主要介紹了Bootstrap Navbar Component實(shí)現(xiàn)響應(yīng)式導(dǎo)航的相關(guān)資料,講解了Bootstrap Navbar應(yīng)用及源碼解析，需要的朋友可以參考下2016-10-10
IP地址輸入框...2006-08-08
這篇文章主要介紹了JS造成內(nèi)存泄漏的幾種情況,結(jié)合實(shí)例形式分析了內(nèi)存泄漏的原理以及JS造成內(nèi)存泄漏的幾種常見(jiàn)情況,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了微信小程序 下拉刷新及上拉加載實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11