<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽效果</title>
<style type="text/css">
body{ background: url(images/baidu_demo.png) no-repeat top center #fff; padding: 0px;margin: 0px;font-size: 12px;font-family: "微软雅黑"; }
.ui-dialog{ width: 380px;height: auto;display: none; position: absolute;z-index: 9000; top: 100px;left: 100px; border: 1px solid #d5d5d5;background: #fff; } .ui-dialog a{ text-decoration: none;} .ui-dialog-title{ height: 48px;line-height: 48px;padding-left: 20px;color: #535353;font-size: 16px; background: #f5f5f5; border-bottom: 1px solid #efefef; cursor: move; } .ui-dialog-title-closebutton{ width: 16px;height: 16px;display: block; position: absolute;top: 12px;right: 20px; background: url(images/close_def.png); } .ui-dialog-title-closebutton:hover{ background: url(images/close_hov.png); } .ui-dialog-content{ padding: 15px 20px; }
.ui-dialog-pt15{ padding-top: 15px; } .ui-dialog-l40{ height: 40px;line-height: 40px; text-align: right;; }
.ui-dialog-input{ width: 100%;height: 40px; margin: 0px;padding: 0px; border: 1px solid #d5d5d5; font-size: 16px;color: #c1c1c1; text-indent: 25px; outline: none; } .ui-dialog-input-username{ background: url(images/input_username.png) no-repeat; } .ui-dialog-input-password{ background: url(images/input_password.png) no-repeat; }
.ui-dialog-submit{ width: 100%;height: 50px;display: block; font-size: 16px;color: #fff; background: #3b7ae3; text-align: center;line-height: 50px; } .ui-dialog-submit:hover{ background: #3f81b0; }
.ui-mask{ width: 100%;height: 100%;background: #000;opacity: 0.4;filter: Alpha(opacity=40); position: absolute;top: 0px;left: 0px;z-index: 8000;display: none; -moz-user-select: none; }
.link{ text-align: right;line-height: 20px;padding-right: 40px; }
</style>
</head><body >
<div class="ui-dialog" id="dialog">
<div class="ui-dialog-title" id="dialogTitle"> 登录通行证 <a href="javascript:hideDialog();" class="ui-dialog-title-closebutton"></a> </div> <div class="ui-dialog-content">
<div class="ui-dialog-pt15 ui-dialog-l40"> <input type="text" value="手机/邮箱/用户名" class="ui-dialog-input ui-dialog-input-username"> </div> <div class="ui-dialog-pt15 ui-dialog-l40"> <input type="text" value="密码" class="ui-dialog-input ui-dialog-input-password"> </div> <div class=" ui-dialog-l40 "> <a href="#">忘记密码</a> </div> <div>
<a href="#" class="ui-dialog-submit">登录</a>
</div> <div class="ui-dialog-l40"> <a href="#">立即注册</a> </div> </div></div>
<div class="ui-mask" id="mask" onselectstart="return false;"></div><div class="link"> <a href="javascript:showDialog();">登录</a></div>
<script type="text/javascript">
// 获取元素对象 function g(id){ return document.getElementById(id); }
// 自动居中 - 登录浮层 ( el = Elemenet) function autoCenter( el ){ var bodyW = document.documentElement.clientWidth; var bodyH = document.documentElement.clientHeight;
var elW = el.offsetWidth; var elH = el.offsetHeight;
el.style.left = ( bodyW - elW ) / 2 + ‘px‘; el.style.top = ( bodyH - elH ) / 2 + ‘px‘; }
// 自动全屏 - 遮罩 function fillToBody( el ){ el.style.width = document.documentElement.clientWidth +‘px‘; el.style.height = document.documentElement.clientHeight +‘px‘; }
var mouseOffsetX = 0; // 偏移 var mouseOffsetY = 0;
var isDraging = false; // 是否可拖拽的标记
// 鼠标事件1 － 在标题栏上按下（要计算鼠标相对拖拽元素的左上角的坐标，并且标记元素为可拖动） g(‘dialogTitle‘).addEventListener(‘mousedown‘,function(e){ var e = e || window.event; mouseOffsetX = e.pageX - g(‘dialog‘).offsetLeft; mouseOffsetY = e.pageY - g(‘dialog‘).offsetTop; isDraging = true; }) // 鼠标事件2 － 鼠标移动时（要检测，元素是否可标记为移动，如果是，则更新元素的位置，到当前鼠标的位置［ps：要减去第一步中获得的偏移］） document.onmousemove = function( e ){ var e = e || window.event;
var mouseX = e.pageX; // 鼠标当前的位置 var mouseY = e.pageY;
var moveX = 0; // 浮层元素的新位置 var moveY = 0;
if( isDraging === true ){
moveX = mouseX - mouseOffsetX; moveY = mouseY - mouseOffsetY;
// 范围限定 moveX > 0 并且 moveX < (页面最大宽度 - 浮层的宽度) // moveY > 0 并且 movey < (页面最大高度 - 浮层的高度)
var pageWidth = document.documentElement.clientWidth ; var pageHeight = document.documentElement.clientHeight ;
var dialogWidth = g(‘dialog‘).offsetWidth; var dialogHeight = g(‘dialog‘).offsetHeight;
var maxX = pageWidth - dialogWidth; var maxY = pageHeight- dialogHeight;
moveX = Math.min( maxX , Math.max(0,moveX) ); moveY = Math.min( maxY , Math.max(0,moveY) );
g(‘dialog‘).style.left = moveX + ‘px‘; g(‘dialog‘).style.top = moveY + ‘px‘; }
}
// 鼠标事件3 － 鼠标松开的时候（标记元素为不可拖动即可） document.onmouseup = function(){ isDraging = false; }
// 展现登录浮层 function showDialog(){ g(‘dialog‘).style.display=‘block‘; g(‘mask‘).style.display = ‘block‘; autoCenter(g(‘dialog‘)); fillToBody( g(‘mask‘) ); }
// 隐藏登录浮层 function hideDialog(){ g(‘dialog‘).style.display = ‘none‘; g(‘mask‘).style.display = ‘none‘; }
window.onresize =function(){ autoCenter(g(‘dialog‘)); fillToBody( g(‘mask‘) ); }</script>
</body></html>
时间： 2024-08-12 13:11:21