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.form.js异步提交表单详解
Apr 25 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jQuery实现获取多选框的值示例
Feb 07 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 判断常量,变量和函数是否存在
2009/04/26 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python 迭代器与生成器实例详解
2017/05/18 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
python ---lambda匿名函数介绍
2019/03/13 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
项目副经理岗位职责
2013/12/30 职场文书
体检通知范文
2015/04/21 职场文书
民事代理词范文
2015/05/25 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
公司周年庆寄语
2019/06/21 职场文书
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers