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 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
srcElement表格样式
2006/09/03 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
python3字符串操作总结
2019/07/24 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
教师业务学习制度
2014/01/25 职场文书
珠宝店促销方案
2014/03/21 职场文书
考勤制度通知
2015/04/25 职场文书
辞职信格式范文
2015/05/13 职场文书
感恩教育观后感
2015/06/17 职场文书
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android