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 相关文章推荐
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 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
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
php Calender(日历)代码分享
2014/01/03 PHP
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
从0开始学Vue
2016/10/27 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
python对于requests的封装方法详解
2019/01/03 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
python分数表示方式和写法
2019/06/26 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
JSF界面控制层技术
2013/06/17 面试题
工商企业管理专业自荐信范文
2014/04/12 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
事业单位年度考核评语
2014/12/31 职场文书
求职简历自我评价2015
2015/03/10 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS
python单向链表实例详解
2022/05/25 Python