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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery实现全选按钮
Jan 01 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/03/27 PHP
PHP form 表单传参明细研究
2009/07/17 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
PHP中cookie知识点学习
2018/05/06 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
python设置表格边框的具体方法
2020/07/17 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
测试工程师职业规划书
2014/02/06 职场文书
公司门卫岗位职责
2014/03/15 职场文书
健康教育评估方案
2014/05/25 职场文书
基层工作经验证明样本
2014/11/16 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
python实现手机推送 代码也就10行左右
2022/04/12 Python