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 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
JavaScript手风琴页面制作
May 17 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 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
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
深入理解Python中各种方法的运作原理
2015/06/15 Python
python3.x实现发送邮件功能
2018/05/22 Python
django初始化数据库的实例
2018/05/27 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
高中的自我鉴定
2013/12/16 职场文书
个人充满哲理的自我评价
2014/02/20 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
2014年党支部工作总结
2014/11/13 职场文书
技术员岗位职责范本
2015/04/11 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server