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 相关文章推荐
Dom 是什么的详细说明
Oct 25 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 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原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
javascript 写类方式之九
2009/07/05 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
Python简单进程锁代码实例
2015/04/27 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
详解Python time库的使用
2019/10/10 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
Python json转字典字符方法实例解析
2020/04/13 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
自我鉴定写作要点
2014/01/17 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
美丽心灵观后感
2015/06/01 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python