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