jquery实现一些小动画二
jquery实现拖拽功能
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>Document</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <link rel="stylesheet" href="./reset.css"> 9 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> 10 <style> 11 html,body{ 12 width:100%; 13 height:100%; 14 } 15 .dialogmark{ 16 position:fixed; 17 top:0; 18 left:0; 19 z-index:1000; 20 width:100%; 21 height:100%; 22 background: rgba(0,0,0,0.3); 23 } 24 .dialogbox{ 25 position:fixed; 26 width:300px; 27 height:400px; 28 z-index: 1001; 29 background:#fff; 30 overflow:hidden; 31 } 32 .dialogbox h3.title{ 33 height:35px; 34 line-height:35px; 35 padding: 0 10px; 36 background: #DDD; 37 cursor: move; 38 position: relative; 39 user-select: none; 40 } 41 .dialogbox h3 i { 42 position: absolute; 43 top:50%; 44 right: 10px; 45 margin-top: -10px; 46 width: 20px; 47 height: 20px; 48 font-size: 16px; 49 line-height: 20px; 50 text-align: center; 51 font-style: normal; 52 cursor: pointer; 53 } 54 </style> 55 </head> 56 <body> 57 <div class="dialogmark"></div> 58 <div class="dialogbox"> 59 <h3 class="title"> 60 标题 61 <i>X</i> 62 </h3> 63 <div class="content"> 64 </div> 65 </div> 66 <script> 67 $(function(){ 68 69 /* 70 拖拽的js实现 71 */ 72 var $dialogmark = $(".dialogmark"), 73 $dialogbox = $(".dialogbox"), 74 $h1 = $dialogbox.children('.title'), 75 $i = $h1.children('i'), 76 HW = $("body").innerWidth(), 77 HH = $("body").innerHeight(), 78 boxW = $dialogbox.outerWidth(), 79 boxH = $dialogbox.outerHeight(); 80 81 $i.click(function(){ 82 $dialogbox.hide(300) 83 }) 84 85 //计算盒子位置 86 var calPosition = function(){ 87 //获取当前窗口的大小 88 $dialogbox.css({ 89 top:(HH - boxH)/2, 90 left:(HW - boxW)/2 91 }) 92 } 93 calPosition() 94 var dragstart = function(event){ 95 var mX = event.clientX, //获取原始鼠标位置X位置 96 mY = event.clientY, //获取原始鼠标位置Y位置 97 boxSX = $dialogbox.position().left, 98 boxSY =$dialogbox.position().top; 99 //这里可以利用传递参数，也可以给元素赋值自定义属性保存变量值 100 $(document).on("mousemove",{mX,mY,boxSX,boxSY},dragmove) 101 } 102 var dragmove = function(event){ 103 var {mX,mY,boxSX,boxSY}= event.data, 104 mMX = event.clientX, //移动鼠标的当前X位置 105 mMY = event.clientY, //移动鼠标的当前Y位置 106 mcX = mMX - mX, //鼠标改变X位置 107 mcY = mMY - mY, //鼠标改变Y位置 108 boxcX = boxSX + mcX, //盒子需要改变的X位置 109 boxcY = boxSY + mcY, //盒子需要改变的Y位置 110 minL = 0, //盒子最小移动X距离 111 minT = 0, //盒子最小移动Y距离 112 maxL = HW - boxW,//盒子最大移动X距离 113 maxT = HH - boxH;//盒子最大移动Y距离 114 115 boxcX = boxcX < minL?minL:(boxcX>maxL?maxL:boxcX) //X边界判断 116 boxcY = boxcY < minT?minT:(boxcY>maxT?maxT:boxcY) //Y边界判断 117 $dialogbox.css({ 118 left:boxcX, 119 top:boxcY 120 }) 121 } 122 var dragend = function(){ 123 //快速拖拽存在鼠标丢失焦点问题 124 $(document).off("mousemove",dragmove) 125 } 126 $h1.mousedown(dragstart) 127 $(document).mouseup(dragend) 128 })
效果图：
注意：
拖拽中存在的问题：
在拖拽中存在一个问题，就是如果鼠标拖拽过快，盒子是需要计算罪行位置的，但是
计算速度跟不上鼠标的移动速度，导致鼠标离开了盒子，那么此时鼠标的任何事件都与盒子
无关了，即鼠标抬起不会触发接触绑定事件，鼠标移动也不会触发定义在盒子的鼠标移动事件
解决思路：
1、使用setCapture与releaseCapture方法。注意google浏览器不支持这两个方法
将鼠标与当前元素绑在一起，无论你移动多快，我都绑定在一起
this.setCapture()
将鼠标与当前元素解绑。与setCapture相反
this.releaseCapture()
2、鼠标移动在快也脱离不了document即当前文档，因此，
我们可以给document绑定mousemove方法，那么鼠标在文档中移动都会触发mosemove绑定的事件
注意：重新绑定document时，存在this指向（如果原本用了this）问题（解决思路：使用bind方法）