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 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jquery实现垂直手风琴导航栏
Feb 18 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
php的计数器程序
2006/10/09 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
python实现字符串加密成纯数字
2019/03/19 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
教育科学研究生自荐信
2013/10/09 职场文书
模范教师事迹材料
2014/02/10 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
继承公证书样本
2014/04/04 职场文书
董事长岗位职责
2015/02/13 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android