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 相关文章推荐
JQuery 文本框使用小结
May 22 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
微信小程序wxs实现吸顶效果
Jan 08 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
Look And Say 序列php实现代码
2011/05/22 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
jQuery创建插件的代码分析
2011/04/14 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
JS中的多态实例详解
2017/10/15 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Django日志模块logging的配置详解
2017/02/14 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
超简单的Python HTTP服务
2019/07/22 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
专业技术职务聘任书
2014/03/29 职场文书
销售员态度差检讨书
2014/10/26 职场文书
2015年检验科工作总结
2015/04/27 职场文书
初中数学教学随笔
2015/08/15 职场文书
教师外出学习心得体会
2016/01/18 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
总结Pyinstaller打包的高级用法
2021/06/28 Python
openstack云计算keystone组件工作介绍
2022/04/20 Servers
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS