JS制作DIV悬浮窗与悬浮窗拖拽
浏览数：189 /
时间：2015年06月09日
//-------------------------------------------------------------------这里只是吐槽！~------------------------------------------------------------------
啊哈，这是第一次来博客园里写博客喃。当然也是我的第一篇博客啦= =！很有纪念意义。。。。哈哈哈哈哈哈哈哈。。。（PS：这样笑的时候经常被喷呀= =！）。
好了，其实我写博客的目的还是为了记录我的学习，我的经历，我的生活嘛。当然我也是记录一下学习到的知识，不然久了忘了就找不到地方复习了= =。。
难道已经有人在吐槽我的注释了？( ⊙ o ⊙ )！哈哈，我的读者哪有这么可爱！
//-------------------------------------------------------------------以下是正文--------------------------------------------------------------------------
今天是2014-3-14，也是实训的第二周结束了。相比第一周的项目设计来看，第二周做了下来发现第一周的设计简直无情。要是拓展的话确实有很多地方都可以拓展呀！但毕竟我的数据库设计是硬伤，这主要是源于一开始的需求分析不到位（好吧我承认这是自己给自己找事，一开始就做好不就行了么！）。但不管是千里马还是断脚马，始终还是要跑下去的。
在指导老师的指点下，让我做一个悬浮窗来显示信息和提交按钮，来增加用户体验。嗯...深思中。。于是果断到百度上去找了相关的代码。。但是尼玛居然用不了= =！这不是坑是什么。。而且很多都还是转的同一篇= =！泪目。好吧，经过了一点修改，解决了显（语）在（法）错误后终于实现了Div的拖拽，Div的定位。为什么我不用和或者顿号喃！因为网上给的代码只能实现单一项功能，而且还不能满足要求。于是勤（不）奋（思）好（进）学（取）的我就开始潜心研究。最终，在我的淫威之下还是将其败倒。最后得到的代码如下：
//-----------------------------------------------------------------代码部分----------------------------------------------------------------------------
code:dragDiv.js
1 // 实现可拖动的div-----------------------------------拖拽部分------------------------------------- 2 var px = 0; 3 var py = 0; 4 var begin = false; 5 //是否要开启透明效果 6 var enableOpacity = false; // 默认不允许 7 var myDragDiv; 8 var docuTopTemp = 0;//上一次的滚轮高度，初始情况下是0 9 var DivId = "elementToDrag"//这里是要拖拽div的id 10 var divWidth = parseInt(document.getElementById(DivId).style.width.split(‘p‘)[0]); 11 var divheigth = parseInt(document.getElementById(DivId).style.height.split(‘p‘)[0]); 12 13 //要移动的div加上onmousedown="down(this)"即可 14 //鼠标按下时获取相对坐标 15 function down(oDiv) { 16 myDragDiv = oDiv; 17 begin = true; 18 oDiv.style.cursor = "hand"; 19 event.srcElement.setCapture(); 20 px = oDiv.style.pixelLeft - event.x; 21 py = oDiv.style.pixelTop - event.y; 22 } 23 //鼠标移动时div的相对坐标随鼠标的坐标变化而变化 24 document.onmousemove=function() { 25 if (myDragDiv != null && typeof (myDragDiv) != "undefined") { 26 if (begin) { 27 if (enableOpacity) { myDragDiv.style.filter = "Alpha(opacity=30)"; } // 滤镜 28 //越界判断 29 if (event.x <= document.documentElement.clientWidth - divWidth && event.x >= divWidth && event.y <= document.documentElement.clientHeight+docuTopTemp-divheigth && event.y >= divheigth + docuTopTemp) { 30 myDragDiv.style.pixelLeft = px + event.x; 31 myDragDiv.style.pixelTop = py + event.y; 32 } 33 } 34 } 35 } 36 //鼠标抬起时释放 37 document.onmouseup = function () { 38 if (myDragDiv != null && typeof (myDragDiv) != "undefined") { 39 begin = false; 40 if (enableOpacity) { myDragDiv.style.filter = "Alpha(opacity=100)"; } // 滤镜 41 myDragDiv.style.cursor = "default"; 42 event.srcElement.releaseCapture(); 43 myDragDiv = null; 44 } 45 } 46 47 //-------------------------------------------定位部分------------------------------------------------------ 48 //定位采用滚动条滚动事件 49 //原理是先判断滚动条的动作，如果向下，则div也向下，向上同理 50 //移动的距离则是滚动条的高值相对于上一次高值的差，初始高值为0，下加上减 51 document.onscroll = function () { 52 var docuTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop; 53 var divTopBar = document.getElementById(DivId);//DivId=elementToDrag是对象id 54 if (docuTop > docuTopTemp) { 55 divTopBar.style.pixelTop += (docuTop - docuTopTemp); 56 } 57 else { 58 divTopBar.style.pixelTop += (docuTop - docuTopTemp);//这里用的是加负数，相当于减= =! 59 } 60 docuTopTemp = docuTop; 61 } 62 63 //--------------------------------------------加载部分------------------------------------------ 64 //设置div的初始位置 65 function MoveFloatLayer() { 66 var x = document.documentElement.clientWidth * 0.8; 67 var y = document.documentElement.clientHeight * 0.1; 68 var docuTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop; 69 var y = docuTop + y; 70 var divTopBar = document.getElementById(DivId); 71 divTopBar.style.pixelLeft = x; 72 divTopBar.style.pixelTop = y; 73 } 74 75 window.onload = MoveFloatLayer;
code:test.aspx 因为我是做.net开发的，所以就用的asp.net，但这是js代码，所以都可以用，这里只是举例。
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 9 <title></title> 10 </head> 11 <body> 12 <form id="form1" runat="server"> 13 <div id="elementToDrag" onmousedown="down(this)" style="position: absolute; width: 160px; height: 100px; z-index: 1; background: #cef"> 14 按下鼠标拖动 15 </div> 16 17 <div> 18 test test test<br /> 19 test test test<br /> 20 test test test<br /> 21 test test test<br /> 22 test test test<br /> 23 test test test<br /> 24 test test test<br /> 25 test test test<br /> 26 test test test<br /> 27 test test test<br /> 28 test test test<br /> 29 test test test<br /> 30 test test test<br /> 31 test test test<br /> 32 test test test<br /> 33 test test test<br /> 34 test test test<br /> 35 test test test<br /> 36 test test test<br /> 37 test test test<br /> 38 test test test<br /> 39 test test test<br /> 40 test test test<br /> 41 test test test<br /> 42 test test test<br /> 43 test test test<br /> 44 test test test<br /> 45 test test test<br /> 46 test test test<br /> 47 test test test<br /> 48 test test test<br /> 49 test test test<br /> 50 test test test<br /> 51 test test test<br /> 52 test test test<br /> 53 test test test<br /> 54 test test test<br /> 55 test test test<br /> 56 test test test<br /> 57 test test test<br /> 58 test test test<br /> 59 test test test<br /> 60 test test test<br /> 61 test test test<br /> 62 test test test<br /> 63 test test test<br /> 64 test test test<br /> 65 test test test<br /> 66 test test test<br /> 67 test test test<br /> 68 test test test<br /> 69 test test test<br /> 70 test test test<br /> 71 test test test<br /> 72 test test test<br /> 73 test test test<br /> 74 test test test<br /> 75 test test test<br /> 76 test test test<br /> 77 test test test<br /> 78 test test test<br /> 79 test test test<br /> 80 test test test<br /> 81 test test test<br /> 82 test test test<br /> 83 test test test<br /> 84 test test test<br /> 85 test test test<br /> 86 test test test<br /> 87 test test test<br /> 88 test test test<br /> 89 test test test<br /> 90 test test test<br /> 91 test test test<br /> 92 test test test<br /> 93 test test test<br /> 94 test test test<br /> 95 test test test<br /> 96 test test test<br /> 97 test test test<br /> 98 test test test<br /> 99 test test test<br /> 100 test test test<br /> 101 test test test<br /> 102 test test test<br /> 103 test test test<br /> 104 test test test<br /> 105 test test test<br /> 106 test test test<br /> 107 test test test<br /> 108 test test test<br /> 109 test test test<br /> 110 test test test<br /> 111 test test test<br /> 112 test test test<br /> 113 test test test<br /> 114 test test test<br /> 115 test test test<br /> 116 test test test<br /> 117 test test test<br /> 118 test test test<br /> 119 test test test<br /> 120 test test test<br /> 121 test test test<br /> 122 test test test<br /> 123 test test test<br /> 124 test test test<br /> 125 test test test<br /> 126 test test test<br /> 127 test test test<br /> 128 test test test<br /> 129 test test test<br /> 130 test test test<br /> 131 test test test<br /> 132 test test test<br /> 133 test test test<br /> 134 test test test<br /> 135 test test test<br /> 136 test test test<br /> 137 test test test<br /> 138 test test test<br /> 139 test test test<br /> 140 test test test<br /> 141 test test test<br /> 142 test test test<br /> 143 test test test<br /> 144 test test test<br /> 145 test test test<br /> 146 test test test<br /> 147 test test test<br /> 148 test test test<br /> 149 test test test<br /> 150 test test test<br /> 151 test test test<br /> 152 test test test<br /> 153 test test test<br /> 154 test test test<br /> 155 test test test<br /> 156 test test test<br /> 157 test test test<br /> 158 test test test<br /> 159 test test test<br /> 160 test test test<br /> 161 test test test<br /> 162 test test test<br /> 163 test test test<br /> 164 test test test<br /> 165 test test test<br /> 166 test test test<br /> 167 test test test<br /> 168 test test test<br /> 169 test test test<br /> 170 test test test<br /> 171 test test test<br /> 172 test test test<br /> 173 test test test<br /> 174 test test test<br /> 175 test test test<br /> 176 test test test<br /> 177 test test test<br /> 178 test test test<br /> 179 test test test<br /> 180 test test test<br /> 181 test test test<br /> 182 test test test<br /> 183 test test test<br /> 184 test test test<br /> 185 test test test<br /> 186 </div> 187 </form> 188 </body> 189 <script src="Script/dragDiv.js"></script><%--必须放在后面加载，因为要获取div的属性，所以放在前面会报错的。--%> 190 </html>
好了具体的代码就是上面的了，根据实际情况去用就OK了。第一期就到这里吧。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
