JavaScript实现跟随鼠标移动的盒子


Posted in Javascript onJanuary 28, 2021

本文实例为大家分享了JavaScript实现跟随鼠标移动的具体代码,供大家参考,具体内容如下

跟随鼠标移动的盒子(包括检测边界值)

效果图:

JavaScript实现跟随鼠标移动的盒子

代码:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>
 
<body>
  <div>111111111</div>
  <script>
    var div = document.getElementsByTagName('div')[0];
    div.onmousedown = function(e) {
      e = window.event || e;
      // 鼠标按下 获取鼠标距离页面左侧距离
      var x = e.clientX;
      // 获取鼠标距离页面上侧距离
      var y = e.clientY;
      // 元素距离页面左侧距离
      var elex = div.offsetLeft;
      // 元素距离页面上侧距离
      var eley = div.offsetTop;
      // 相减得到鼠标距离元素的距离
      var X = x - elex;
      var Y = y - eley;
      console.log(X, Y);
      document.onmousemove = function(e) {
          e = window.event || e;
          // 鼠标移动过程中 获取鼠标距离页面距离
          var movex = e.clientX;
          var movey = e.clientY;
          // 1.左侧边界值
          // 元素移动过程中距离页面左侧距离
          var leftx = movex - X;
          var lefty = movey - Y;
          // 1.左侧边界值
          if (leftx <= 0) {
            leftx = 0;
          }
          // 2.上侧边界值
          if (lefty <= 0) {
            lefty = 0
          }
          // 3.右侧边界值
          // 页面可视区宽 -元素宽
          var rightx = document.documentElement.clientWidth - div.offsetWidth;
          if (leftx >= rightx) {
            leftx = rightx
          }
          // 4.下侧边界值
          // 页面可视区高 -元素高
          var righty = document.documentElement.clientHeight - div.offsetHeight;
          if (lefty >= righty) {
            lefty = righty;
          }
          // 鼠标移动过程中 获取鼠标距离页面距离 - 鼠标距离元素的距离 =元素的left top值
          div.style.left = leftx + 'px';
          div.style.top = lefty + 'px';
 
 
 
        }
        // 抬起清除移动事件
      document.onmouseup = function() {
          document.onmousemove = null;
        }
        // 阻止默认事件
      return false;
 
    }
  </script>
</body>
 
</html>

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

Javascript 相关文章推荐
Opacity.js
Jan 22 Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 #Vue.js
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 #Javascript
vscode自定义vue模板的实现
Jan 27 #Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 #Vue.js
js实现鼠标切换图片(无定时器)
Jan 27 #Javascript
JavaScript实现切换多张图片
Jan 27 #Javascript
jquery实现点击左右按钮切换图片
Jan 27 #jQuery
You might like
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
Python 判断奇数偶数的方法
2018/12/20 Python
python3实现逐字输出的方法
2019/01/23 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
Python面向对象进阶学习
2019/05/21 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
python ubplot使用方法解析
2020/01/10 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
高级运动鞋:GREATS
2019/07/19 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
2014年教师培训的自我评价
2014/01/03 职场文书
总经理岗位职责描述
2014/02/08 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
期中考试反思800字
2014/05/01 职场文书
员工生日活动方案
2014/08/24 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python