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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery实现简单三级联动效果
Sep 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 sprintf()函数让你的sql操作更安全
2008/07/23 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
php Smarty 字符比较代码
2011/02/27 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
php汉字转拼音的示例
2014/02/27 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
开启PHP的伪静态模式
2015/12/31 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
tensorflow中next_batch的具体使用
2018/02/02 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
python3实现点餐系统
2019/01/24 Python
使用python实现kNN分类算法
2019/10/16 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
自荐信写法介绍
2014/01/25 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
年度考核个人总结
2015/03/06 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
JavaScript组合继承详解
2021/11/07 Javascript