js实现跟随鼠标移动的小球
更新时间：2019年08月26日 09:05:53 作者：Vam的金豆之路
这篇文章主要为大家详细介绍了js实现跟随鼠标移动的小球，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了小程序中手机号识别的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了JavaScript中的全局对象介绍,对于任何JavaScript程序,当程序开始运行时,JavaScript解释器都会初始化一个全局对象以供程序使用,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了JS控制弹出悬浮窗口(一览画面)的实例代码的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-05-05
这篇文章主要为大家详细介绍了微信小程序实现吸顶盒效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要为大家详细介绍了XMLHttpRequest 同步请求和异步请求,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
使用Javascript开发sliding-nav带滑动条效果的导航插件
这篇文章主要介绍了使用Javascript开发sliding-nav带滑动条效果的导航插件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-03
Bootstrap Navbar Component实现响应式导航
这篇文章主要介绍了Bootstrap Navbar Component实现响应式导航的相关资料,讲解了Bootstrap Navbar应用及源码解析，需要的朋友可以参考下2016-10-10
IP地址输入框...2006-08-08
这篇文章主要介绍了JS造成内存泄漏的几种情况,结合实例形式分析了内存泄漏的原理以及JS造成内存泄漏的几种常见情况,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了微信小程序 下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
最新评论