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 相关文章推荐
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
如何编写jquery插件
Mar 29 jQuery
React组件对子组件children进行加强的方法
Jun 23 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 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 随机生成10位字符代码
2009/03/26 PHP
php实现webservice实例
2014/11/06 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
python利用拉链法实现字典方法示例
2017/03/25 Python
python实现简单加密解密机制
2019/03/19 Python
python实现可变变量名方法详解
2019/07/01 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
python如何进入交互模式
2020/07/06 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
高中班长自我鉴定
2013/12/20 职场文书
信息技术教学反思
2014/02/12 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
2014年租房协议书范本
2014/10/30 职场文书
办公用房租赁协议书
2014/11/29 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
节水倡议书
2015/01/19 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
python中super()函数的理解与基本使用
2021/08/30 Python