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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
Vue实现选择城市功能
May 27 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
webpack external模块的具体使用
Mar 10 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
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数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
react router 4.0以上的路由应用详解
2017/09/21 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
为python设置socket代理的方法
2015/01/14 Python
Django xadmin安装及使用详解
2020/10/26 Python
10个示例带你掌握python中的元组
2020/11/23 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
Java面试题及答案
2012/09/08 面试题
护士演讲稿范文
2014/01/05 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
倡议书怎么写?
2019/04/11 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python