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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
jquery实现图片轮播器
May 23 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery实现计算器功能
Oct 19 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
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
php 操作符与控制结构
2012/03/07 PHP
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
jQuery实现跨域
2015/02/03 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
element中的$confirm的使用
2020/04/26 Javascript
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
华为慧通面试题
2012/09/11 面试题
汽车驾驶求职信
2013/10/25 职场文书
广告学专业推荐信范文
2013/11/23 职场文书
护理实习自我鉴定
2013/12/14 职场文书
上海世博会口号
2014/06/19 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
安全生产感想
2015/08/07 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android