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插件之validation插件
Mar 29 jQuery
jQuery操作css样式
May 15 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery HTML css()方法与css类实例详解
May 20 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
PHP下几种删除目录的方法总结
2007/08/19 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
js document.write()使用介绍
2014/02/21 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
会计顶岗实习心得
2014/01/25 职场文书
感恩节活动策划方案
2014/05/16 职场文书
党员一帮一活动总结
2014/07/08 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
2014年人大工作总结
2014/12/10 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server
Windows7下FTP搭建图文教程
2022/08/05 Servers