信鸽网

jquery实现可拖拽弹出层特效

  作者：bea

功能很简单，却非常的实用，代码更加的简洁，这里就不多废话了 奉上源码： 代码如下: <!DOCTYPE html> <html xmlns=" http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title>
功能很简单，却非常的实用，代码更加的简洁，这里就不多废话了
奉上源码：


代码如下:


<!DOCTYPE html>
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
.dragBox
{
width: 400px;
height: 200px;
position: absolute;
top: 40%;
left: 40%;
background: #e8e8e8;
z-index: 8001;
}
.dragBox > div
{
height: 30px;
cursor: move;
background: #00ff21;
position: relative;
}

.ui-mask { width: 100%; height: 100%; background: #000; position: absolute; top: 0px; z-index: 8000; opacity: 0.4; filter: Alpha(opacity=40); } </style> <script src="framework/base/jquery-1.8.3.min.js"></script> <script type="text/javascript"></script> <script type="text/javascript"> $(function () { var mouseOffx = 0; var mouseOffy = 0; var isDrag = false; $(".dragBox div:eq(0)").unbind(".click").on("mousedown", function (ev) { mouseOffx = ev.clientX - $(".dragBox div:eq(0)").offset().left; mouseOffy = ev.clientY - $(".dragBox div:eq(0)").offset().top; isDrag = true; }) $(document).unbind(".click").on("mousemove", function (ev) { var mourseX = ev.clientX, mourseY = ev.clientY; var moveX = 0, moveY = 0; if (isDrag === true) { moveX = mourseX - mouseOffx; moveY = mourseY - mouseOffy; var maxX = $(window).outerWidth(false) - $(".dragBox").outerWidth(false); var maxY = $(window).outerHeight(false) - $(".dragBox").outerHeight(false); moveX = Math.min(maxX, Math.max(0, moveX)); moveY = Math.min(maxY, Math.max(0, moveY)); $(".dragBox").css({ "left": moveX, "top": moveY }); } }); $(document).unbind(".click").on("mouseup", function () { isDrag = false; }); }); </script> </head> <body> test <div class="ui-mask" id="mask" onselectstart="return false"></div> <div class="dragBox"> <div> </div> </div> </body> </html>




有用  |  无用

猜你喜欢

您可能感兴趣的文章: