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 相关文章推荐
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
JS实现纵向轮播图(初级版)
Jan 18 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
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
php实现无限级分类
2014/12/24 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
javascript object array方法使用详解
2012/12/03 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
js实现五星评价功能
2017/03/08 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
python写入中英文字符串到文件的方法
2015/05/06 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
python购物车程序简单代码
2018/04/18 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
个人简历自荐信
2014/06/26 职场文书
企业标语大全
2014/07/01 职场文书
端午节活动总结
2014/08/26 职场文书
鸟的天堂导游词
2015/01/31 职场文书
倡议书的格式写法
2015/04/28 职场文书
环保守法证明
2015/06/24 职场文书
2015年征兵工作总结
2015/07/23 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
用Python实现屏幕截图详解
2022/01/22 Python