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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了Webpack中的文件指纹的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了详解单页面路由工程使用微信分享及二次分享解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
超精简的拽拉效果JS，并且还是同时支持IE和FF。 可以给与其他刚开始学习JS的朋友作为参考和学习。2008-07-07
这篇文章主要给大家介绍了关于如何为你的JS项目添加智能提示与类型检查的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
这篇文章主要介绍了JSON与js对象序列化,结合实例形式详细分析了JavaScript与JSON序列化操作的相关实现技巧与注意事项,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了基于JavaScript的数据结构队列动画实现示例解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
asp作为主页面，外接一个js的，我想知道一下能否在js里面调用asp的变量值，如果能这些值是怎么传递过去的呢？本文将提供解决方法，需要的朋友可以参考下2012-12-12
在JavaScript中使用严格模式(Strict Mode)
这篇文章主要介绍了在JavaScript中使用严格模式(Strict Mode),除了正常运行模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了JS实现电脑虚拟键盘打字测试，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
本文通过实例代码给大家介绍了移动端点击按钮复制文本内容 ，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
最新评论