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 remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
使用jquery实现轮播图效果
Jan 02 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
56.com视频采集接口程序(PHP)
2007/09/22 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
webpack4简单入门实例
2018/09/06 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
python解析中国天气网的天气数据
2014/03/21 Python
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
pandas中去除指定字符的实例
2018/05/18 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
python支持多继承吗
2020/06/19 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
创建服务型党组织实施方案
2014/02/25 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
党支部综合考察意见
2015/06/01 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
mysql主从复制的实现步骤
2021/10/24 MySQL
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技