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.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery常用选择器详解
Jul 17 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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 COOKIE及时生效的方法介绍
2014/02/14 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
如何为vue的项目添加单元测试
2018/12/19 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
Python struct模块解析
2014/06/12 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
Python字典遍历操作实例小结
2019/03/05 Python
python全栈知识点总结
2019/07/01 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
给我一面国旗 python帮你实现
2019/09/30 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
年终考核评语
2014/01/19 职场文书
教师节活动主持词
2014/04/02 职场文书
学校教师读书活动总结
2014/07/08 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
MySQL如何构建数据表索引
2021/05/13 MySQL