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实现动态删除LI的方法
May 30 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jquery自定义组件实例详解
Dec 31 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实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
python实现的自动发送消息功能详解
2019/08/15 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
J2EE中的容器都包括哪些
2013/08/21 面试题
大学生应聘导游自荐信
2014/06/02 职场文书
环境卫生标语
2014/06/09 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
幼师自荐信范文
2015/03/06 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android