js实现跟随鼠标移动的小球


Posted in Javascript onAugust 26, 2019

本文实例为大家分享了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>

js实现跟随鼠标移动的小球

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
javascrip关于继承的小例子
May 10 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
javascript判断office版本示例
Apr 11 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
layui获取选中行数据的实例讲解
Aug 19 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 #Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 #Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 #Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 #Javascript
JS阻止事件冒泡的方法详解
Aug 26 #Javascript
express框架中使用jwt实现验证的方法
Aug 25 #Javascript
JS异步处理的进化史深入讲解
Aug 25 #Javascript
You might like
PHP XML操作类DOMDocument
2009/12/16 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
javascript读取RSS数据
2007/01/20 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
JS变量及其作用域
2017/03/29 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
python每隔N秒运行指定函数的方法
2015/03/16 Python
Python中的 enum 模块源码详析
2019/01/09 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
python中with用法讲解
2020/02/07 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
Django实现简单的分页功能
2021/02/22 Python
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
汽车专业学生自我评价
2014/01/19 职场文书
运动会稿件50字
2014/02/17 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
《火烧云》教学反思
2016/02/23 职场文书
导游词之天津古文化街
2019/11/09 职场文书
Python进行区间取值案例讲解
2021/08/02 Python
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS