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 扩展对input的一些操作方法
Oct 30 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
js性能优化技巧
Nov 29 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
vue实现五子棋游戏
May 28 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脚本数据库功能详解(中)
2006/10/09 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
TensorFlow损失函数专题详解
2018/04/26 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
pandas 时间格式转换的实现
2019/07/06 Python
python每天定时运行某程序代码
2019/08/16 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
易程科技软件测试笔试
2013/03/24 面试题
班主任工作经验材料
2014/02/02 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
拾金不昧表扬信
2015/01/16 职场文书
保送生自荐信
2015/03/06 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
德能勤绩工作总结
2015/08/11 职场文书
Python 键盘事件详解
2021/11/11 Python