当前位置:首页 > 编程教程 > jQuery技术文章 > jQuery实现div跟随鼠标移动

如何用jQuery实现div随鼠标移动而移动

  • 发布时间:
  • 作者:码农之家
  • 点击:60

这篇文章主要知识点是关于jQuery、div、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery实战从入门到精通
  • 类型:jQuery大小:189.1 MB格式:PDF作者:未来科技
立即下载

jQuery实现div跟随鼠标移动

重点是弄清楚如何获取鼠标现位置与移动后位置,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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.491207

jquery DIV撑大让滚动条滚到最底部代码

$("#feedbackContainer").scrollTop($("#feedbackContainer").height()); ……

网友NO.971821

jQuery控制Div拖拽效果完整实例分析

本文实例讲述了jQuery控制Div拖拽效果的方法。分享给大家供大家参考。具体如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title无标题文档/titlestyle#Drigging {width:200px;background:#CCC;border:solid 1px #666;height:80px;line-height:80px;text-align:center;position:absolute;}/stylescript src="jquery-1.8.2.min.js" type="text/javascript"/scriptscript type="text/javascript"$(function(){ var bool=false; //标识是否移动元素var offsetX=0; //声明DIV在当前窗口的Left值var offsetY=0; //声明DIV在当前窗口的Top值$("#Drigging").mouseover(function(){$(this).css('cursor','move');//当鼠标移动到拖拽的DIV上的时候,将鼠标的样式设置为移动(move)})$("#Drigging").mousedown(function(){ bool=true; //当鼠标在移动元素按下的时候将boo……

网友NO.917934

jQuery实现div拖拽效果实例分析

本文实例分析了jQuery实现div拖拽效果。分享给大家供大家参考,具体如下: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"htmlheadtitle New Document /titlescript type="text/javascript" src="jquery-1.7.2.min.js"/scriptstyle type="text/css"/*模块拖拽*/.drag{position:absolute;width:100px;height:100px;border:1px solid #ddd;background:#FBF2BD;text-align:center;padding:5px;top:100px;left:20px;cursor:move;}/stylescript type="text/javascript"// 模块拖拽$(function(){var _move=false;//移动标记var _x,_y;//鼠标离控件左上角的相对位置 $(".drag").click(function(){ //alert("click");//点击(松开后触发) }).mousedown(function(e){ _move=true; _x=e.pageX-parseInt($(".drag").css("left")); _y=e.pageY-parseInt($(".drag").css("top")); $(".drag").fadeTo(20, 0.5);//点击后开始拖动并透明显示 }); $(document).mousemove(function(e){ if(_move){ var x=e.pageX-_x;//移动时根据鼠标位置计算控……

网友NO.301425

一个用jquery写的判断div滚动条到底部的方法【推荐】

jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它。 我们现在只探讨和垂直滚动有关的 scrollTop、scrollHeight 属性。 一、滚动条有关属性的正确理解: 假设有以下Html代码: div id="div1" div /div/div 由于内部的div标签高度比外部的长,并且外部的div允许自动出现垂直滚动条,所以用浏览器打开后,可以看到垂直滚动条。滚动条向下拖动一段距离,看到的页面效果如下(右部的a、b是我抓图后,用PS标出来的): 那么,这里的外部div 的scrollTop、scrollHeight 属性到底是什么呢? 有人说,scrollTop等于图中标出的a。scrollHeight 等于外部div的高度500px。其实,都不对。 其实,图中标出的a、b,对我们编程写js代码没有任何具体……

网友NO.907399

jquery 实现input输入什么div图层显示什么

html meta charset="utf-8" / style .ppp{ width:600px; height:300px; background-color:pink; } /style input type="text" id="ttt" name="" value="" maxlength="" placeholder="" / br /br /br / div class="ppp"/div!-- -- script src="jquery-1.7.2.min.js"/script script $("document").ready(function(){ $("#ttt").keyup( function(){$(".ppp:first").html(this.value)} ) }); /script /html ……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com