jquery实现一些小动画二

jquery实现拖拽功能

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <title>Document</title>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <link rel="stylesheet" href="./reset.css">

   <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

   <style>

     html,body{

       width:100%;

       height:100%;

     }

     .dialogmark{

       position:fixed;

       top:0;

       left:0;

       z-index:1000;

       width:100%;

       height:100%;

       background: rgba(0,0,0,0.3);

     }

     .dialogbox{

       position:fixed;

       width:300px;

       height:400px;

       z-index: 1001;

       background:#fff;

       overflow:hidden;

     }

     .dialogbox h3.title{

       height:35px;

       line-height:35px;

       padding: 0 10px;

       background: #DDD;

       cursor: move;

       position: relative;

       user-select: none;

     }

     .dialogbox h3 i {

       position: absolute;

       top:50%;

       right: 10px;

       margin-top: -10px;

       width: 20px;

       height: 20px;

       font-size: 16px;

       line-height: 20px;

       text-align: center;

       font-style: normal;

       cursor: pointer;

     }

   </style>

 </head>

 <body>

     <div class="dialogmark"></div>

     <div class="dialogbox">

       <h3 class="title">

         标题

         <i>X</i>

       </h3>

       <div class="content">

       </div>

     </div>

     <script>

       $(function(){

         /*

           拖拽的js实现

         */

         var $dialogmark = $(".dialogmark"),

             $dialogbox = $(".dialogbox"),

             $h1 = $dialogbox.children('.title'),

             $i = $h1.children('i'),

             HW = $("body").innerWidth(),

             HH = $("body").innerHeight(),

             boxW = $dialogbox.outerWidth(),

             boxH = $dialogbox.outerHeight();

         $i.click(function(){

           $dialogbox.hide(300)

         })

           //计算盒子位置

           var calPosition = function(){

             //获取当前窗口的大小

             $dialogbox.css({

               top:(HH - boxH)/2,

               left:(HW - boxW)/2

             })

           }

           calPosition()

           var dragstart = function(event){

             var mX = event.clientX,  //获取原始鼠标位置X位置

                 mY = event.clientY, //获取原始鼠标位置Y位置

                 boxSX = $dialogbox.position().left,

                 boxSY =$dialogbox.position().top;

               //这里可以利用传递参数，也可以给元素赋值自定义属性保存变量值

             $(document).on("mousemove",{mX,mY,boxSX,boxSY},dragmove)

           }

           var dragmove = function(event){

             var {mX,mY,boxSX,boxSY}= event.data,

                 mMX = event.clientX,  //移动鼠标的当前X位置

                 mMY = event.clientY,  //移动鼠标的当前Y位置

                 mcX = mMX - mX,        //鼠标改变X位置

                 mcY = mMY - mY,      //鼠标改变Y位置

                 boxcX = boxSX + mcX,  //盒子需要改变的X位置

                 boxcY = boxSY + mcY, //盒子需要改变的Y位置

                 minL = 0,   //盒子最小移动X距离

                 minT = 0,  //盒子最小移动Y距离

                 maxL = HW - boxW,//盒子最大移动X距离

                 maxT = HH - boxH;//盒子最大移动Y距离

               boxcX = boxcX < minL?minL:(boxcX>maxL?maxL:boxcX)  //X边界判断

               boxcY = boxcY < minT?minT:(boxcY>maxT?maxT:boxcY)  //Y边界判断

               $dialogbox.css({

                 left:boxcX,

                 top:boxcY

               })

           }

           var dragend = function(){

               //快速拖拽存在鼠标丢失焦点问题

               $(document).off("mousemove",dragmove)

           }

           $h1.mousedown(dragstart)

           $(document).mouseup(dragend)

       })

效果图：

　　

注意：

　　拖拽中存在的问题：　　　　

　　　　在拖拽中存在一个问题，就是如果鼠标拖拽过快，盒子是需要计算罪行位置的，但是
　　　　计算速度跟不上鼠标的移动速度，导致鼠标离开了盒子，那么此时鼠标的任何事件都与盒子
　　　　无关了，即鼠标抬起不会触发接触绑定事件，鼠标移动也不会触发定义在盒子的鼠标移动事件

　　解决思路：　　　

　　　　1、使用setCapture与releaseCapture方法。注意google浏览器不支持这两个方法

　　　　　将鼠标与当前元素绑在一起，无论你移动多快，我都绑定在一起
　　　　 　　this.setCapture()
　　　　　将鼠标与当前元素解绑。与setCapture相反
　　　　　　 this.releaseCapture()
　　　  2、鼠标移动在快也脱离不了document即当前文档，因此，
 　　　　　　我们可以给document绑定mousemove方法，那么鼠标在文档中移动都会触发mosemove绑定的事件
　　　　　　　　注意：重新绑定document时，存在this指向（如果原本用了this）问题（解决思路：使用bind方法）

jquery实现一些小动画二的更多相关文章

  1. jquery实现一些小动画一

    jquery实现小动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. WPF之小动画二

    上一篇文章简单介绍了动画的定义方法和一些控制动画的方法,并没有涉及复杂属性的动画处理方式,本文将继续动画的其它方面的使用. 写在前面(对于一些动画操作时候的建议): 1.如果希望某个元素从显示到消失, ...

  3. 利用jQuery实现用户名片小动画

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.下面给大家介绍利用jQuery实现的小动画,非常的简便,如果有原生js操作的话,那么就不止这么多行了.至于CSS,个人觉得,这边CSS布局也蛮重 ...

  4. 用jquery实现抽奖小程序

    用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...

  5. 关于JQuery（最后一点动画效果*）

    1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中. 2,math.abs(len)取绝对值 3,按钮高亮显示,一般是配置两个按钮,一个普通的,一 ...

  6. Jquery自定义扩展方法（二）--HTML日历控件

    一.概述 研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看 ...

  7. 如何制作网页小动画？——gif or png

    一.场景与动画 为了拉动网站氛围,或者吸引用户浏览焦点,需要使用一些小动画.这种动画不是(gif)单纯的重复,而是需要需要一些控制和交互,比如在动画完成后打开一个对话框.动画有几个基本要素(时间控制, ...

  8. jquery IE6 下animate 动画的opacity无效

    jquery IE6 下animate 动画的opacity无效,其实是有效的,因为IETester的一个小BUG 原生IE6 没问题...呵呵~~

  9. js、jQuery实现2048小游戏

    2048小游戏 一.游戏简介:  2048是一款休闲益智类的数字叠加小游戏 二. 游戏玩法: 在4*4的16宫格中,您可以选择上.下.左.右四个方向进行操作,数字会按方向移动,相邻的两个数字相同就会合 ...

随机推荐

  1. react的路由权限控制

    在使用路由的时候,有的时候我们的界面只能够在登录之后才可以看的到,这个时候就需要使用路由权限控制了 找了资料发现一个就是我使用的方法,一个是高阶组件. 原谅菜鸟看不太懂不会使用高阶组件………… 首先在 ...

  2. 【洛谷P4251】[SCOI2015]小凸玩矩阵（二分+二分图匹配）

    洛谷 题意: 给出一个\(n*m\)的矩阵\(A\).现要从中选出\(n\)个数,任意两个数不能在同一行或者同一列. 现在问选出的\(n\)个数中第\(k\)大的数的最小值是多少. 思路: 显然二分一 ...

  3. pthread_create线程终止问题

    一直以为,程序创建线程,线程运行结束会自动清空资源 最近在一个项目中用到了线程,除去业务逻辑,我把他简化出来是下面这样 //pthread.c 错误demo示例#include <stdio.h ...

  4. SpringMVC详细流程（一）

    Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求驱动指的就是使用请求-响应模 ...

  5. liunx下安装mysql-5.7.25-linux-glibc2.12-x86_64.tar.gz

    1.解压准备一个赶紧的环境,然后安装mysql. 2.cd到/usr/local/目录下,修改文件名为mysql 修改完目录名以后我们cd到mysql下,建立一个data目录命令:cd mysql/ ...

  6. 三、Spring注解之@Import

    spring注解之@Import [1]@Import ​ 参数value接收一个Class数组,将你传入的类以全类名作为id加入IOC容器中 ​ 比较简单,此处不做详细解释 [2]ImportSel ...

  7. 此贴告诉你：为啥shell脚本人，不建议学python

    py很强大,我承认.但在运维方面,py不但不强大,还有硬伤.正因为有下述硬伤,所以我们运维,还是用shell多,用py极少.我看到用shell的人很多,你建议人用python,人说py是很好,但下一秒 ...

  8. SEO-------- 了解

    SEO(Search Engine Optimization) 译为:搜索引擎优化,是一种透过了解搜索引擎的运作规则来调整网站,以及提高目的的网站在有关搜索引擎内的排名方式. 目的:为了让用户更快的搜 ...

  9. raspberry pi 4b 常见的一些配置信息

    实验记录地址 https://gitee.com/dhclly/icepi.raspberry-pi 针脚图 面包板 gnd & vcc VCC:电路的供电电压: GND:指板子里面总的地线. ...

  10. Netty中的ChannelFuture和ChannelPromise

    在Netty使用ChannelFuture和ChannelPromise进行异步操作的处理 这是官方给出的ChannelFutur描述 * | Completed successfully | * + ...