大佬教程收集整理的这篇文章主要介绍了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.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("@H_521_151@mousemove",{mX,mY,BoxSX,BoxSY},dragmovE) 101 } 102 var dragmove = function(event){ 103 var {mX,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?@H_521_151@minL:(BoxcX>@H_521_151@maxL?@H_521_151@maxL:BoxcX) //X边界判断 116 BoxcY = BoxcY < minT?@H_521_151@minT:(BoxcY>@H_521_151@maxT?@H_521_151@maxT:BoxcY) //Y边界判断 117 $dialogBox.css({ 118 left:BoxcX,119 top:BoxcY 120 }) 121 } 122 var dragend = function(){ 123 //快速拖拽存在鼠标丢失焦点问题 124 $(document).off("@H_521_151@mousemove",dragmovE) 125 } 126 $h1.mousedown(dragstart) 127 $(document).mouseup(dragend) 128 })@H_769_1247@
效果图：
注意：
拖拽中存在的问题：
在拖拽中存在一个问题，就是如果鼠标拖拽过快，盒子是需要计算罪行位置的，但是
计算速度跟不上鼠标的移动速度，导致鼠标离开了盒子，那么此时鼠标的任何事件都与盒子
无关了，即鼠标抬起不会触发接触绑定事件，鼠标移动也不会触发定义在盒子的鼠标移动事件
解决思路：
1、使用setCapture与releaseCapture方法。注意google浏览器不支持这两个方法 将鼠标与当前元素绑在一起，无论你移动多快，我都绑定在一起 this.setCapture() 将鼠标与当前元素解绑。与setCapture相反 this.releaseCapture() 2、鼠标移动在快也脱离不了document即当前文档，因此， 我们可以给document绑定mousemove方法，那么鼠标在文档中移动都会触发mosemove绑定的事件 注意：重新绑定document时，存在this指向（如果原本用了this）问题（解决思路：使用bind方法）
以上是大佬教程为你收集整理的jquery实现一些小动画二全部内容，希望文章能够帮你解决jquery实现一些小动画二所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
