jQuery实现div跟随鼠标移动


Posted in jQuery onAugust 20, 2020

重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置:

用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动

代码如下:(注意看绿色部分的解释)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="{utf-8}">
  <title></title>
  <script src="../jquery-3.2.0.js"></script>
  <style>
   .aa{
    height: 100px;
    width: 200px;
    position: absolute;
    background-color: green;
   }
  </style>
 </head>
 <body>
  <div class="aa"></div>
 </body>
</html>
<script>
 $(".aa").mousedown(function(e){
  //设置移动后的默认位置
  var endx=0;
  var endy=0;

  //获取div的初始位置,要注意的是需要转整型,因为获取到值带px
  var left= parseInt($(".aa").css("left"));
  var top = parseInt($(".aa").css("top"));

  //获取鼠标按下时的坐标,区别于下面的es.pageX,es.pageY
  var downx=e.pageX;
  var downy=e.pageY;  //pageY的y要大写,必须大写!!

  // 鼠标按下时给div挂事件
 $(".aa").bind("mousemove",function(es){

  //es.pageX,es.pageY:获取鼠标移动后的坐标
  var endx= es.pageX-downx+left;  //计算div的最终位置
  var endy=es.pageY-downy+top;

  //带上单位
  $(".aa").css("left",endx+"px").css("top",endy+"px") 
 }); 
 })
 

 $(".aa").mouseup(function(){
  //鼠标弹起时给div取消事件
  $(".aa").unbind("mousemove")
 })
 
</script>

区别于下面这段代码:(最终实现效果是div随鼠标位置移动,具体效果想看的可以粘贴复制对比看看差距在哪)

<script>
$(".aa").mousedown(function(e){
 $(document).bind("mousemove",function(e){
  $(".aa").css("left",e.pageX).css("top",e.pageY)
 });
})
 $(".aa").mouseup(function(){
  $(document).unbind("mousemove")
 })
 </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 #jQuery
Jquery把获取到的input值转换成json
May 15 #jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 #jQuery
jQuery返回定位插件详解
May 15 #jQuery
jQuery操作css样式
May 15 #jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 #jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 #jQuery
You might like
如何让CI框架支持service层
2014/10/29 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
很可爱的输入框
2008/08/03 Javascript
js对象的比较
2011/02/26 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python实现字符串和字典的转换
2018/09/29 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
给面试官的感谢信
2014/02/01 职场文书
幼师自我鉴定
2014/02/01 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
Python os和os.path模块详情
2022/04/02 Python
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技