jQuery实现鼠标拖动图片功能


Posted in jQuery onMarch 04, 2021

本例利用jQuery实现一个鼠标托动图片的功能。

首先设一个wrapper,wrapper内的坐标即图片移动的坐标

#wrapper{
      width: 1000px;
      height:1000px;
      position:relative;
    }

设置图片div,这个div即要拖动的div

#div1{
      position: absolute;
      left:0px;
      top:0px;
      width: 300px;
      height: 200px;
      background: url("d:/Pictures/Earth.jpg");
      background-size:contain;
    }

上面设置了wrapper的定位为relative,div1的定位为absolute。

接下来设计拖动的算法:

思路如下:

1.鼠标点下时让div跟随鼠标移动

2.鼠标松开时停止跟随

首先需要一个函数,他会将该div的坐标改变为当前鼠标的位置:

首先需要定义几个变量,保存当前鼠标的坐标以及图片的坐标

var timer;
      var mouseX=0;
      var mouseY=0;
      var pic_width = parseInt($("#div1").css("width")); 
      var pic_height = parseInt($("#div1").css("height"));

那么现在就需要为wrapper添加一个事件监听器,鼠标在wrapper中移动时,修改变量mousex,mousey的值

$("#wrapper").mousemove(function(e){
        mouseX = e.clientX;
        mouseY = e.clientY;
      });

编写follow函数,并用计时器调用它

$("#div1").mousedown(function(){
        timer=setInterval(follow,10);
      });
      $("#div1").mouseup(function(){
        clearInterval(timer);
      });
      var follow = function(){

        $("#div1").css("left",mouseX-pic_width/2);
        $("#div1").css("top",mouseY-pic_height/2);
      };

完整代码如下所示:

<!doctype html>
<html>
  <head>
    <script type = "text/javascript" src = "jquery.js"></script>
    <style type = "text/css">
    #wrapper{
      width: 1000px;
      height:1000px;
      position: relative;
      background: linear-gradient(lightblue,white);
      font-size: 40px;
    }
    #div1{
      position: absolute;
      left:0px;
      top:0px;
      width: 300px;
      height: 200px;
      background: url("d:/Pictures/Earth.jpg");
      background-size:contain;
    }
    </style>
  </head>
  <body>
    <div id = "wrapper">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit numquam accusamus explicabo praesentium laudantium et accusantium, ab ipsum, excepturi necessitatibus quos iste ad qui deleniti sed debitis reiciendis quam nisi.
      <div id = "div1">

      </div>
    </div>
    
    
    <script>
      
      var timer;
      var mouseX=0;
      var mouseY=0;
      var pic_width = parseInt($("#div1").css("width")); 
      var pic_height = parseInt($("#div1").css("height")); 

      
      $("#wrapper").mousemove(function(e){
        mouseX = e.clientX;
        mouseY = e.clientY;
      });

      $("#div1").mousedown(function(){
        timer=setInterval(follow,10);
      });
      $("#div1").mouseup(function(){
        clearInterval(timer);
      });
      var follow = function(){

        $("#div1").css("left",mouseX-pic_width/2);
        $("#div1").css("top",mouseY-pic_height/2);
      };
    </script>
  </body>
</html>

最终效果:

jQuery实现鼠标拖动图片功能

到此这篇关于jQuery实现鼠标拖动图片功能的文章就介绍到这了,更多相关jQuery鼠标拖动图片内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jquery实现手风琴案例
May 04 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 #jQuery
jquery实现广告上下滚动效果
Mar 04 #jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 #jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 #jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 #jQuery
jquery实现点击左右按钮切换图片
Jan 27 #jQuery
jquery实现穿梭框功能
Jan 19 #jQuery
You might like
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
8个必备的PHP功能实例代码
2013/10/27 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
Python实现合并字典的方法
2015/07/07 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
python多线程使用方法实例详解
2019/12/30 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
药物学专业学生的自我评价
2013/10/27 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
学校消防安全责任书
2014/07/23 职场文书
教师节祝酒词
2015/08/11 职场文书