window.onresize設(shè)置了不起作用？我的代碼那里出問題了呢？請(qǐng)教了?。?！
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕課網(wǎng)-拖拽效果</title>
<style type="text/css">
? ? body{padding: 0px;margin: 0px;font-size: 12px;font-family: "微軟雅黑";}
? ? /*登錄浮層組件*/
? ? .ui-dialog{?
? ? ? ? width: 380px;height: auto;
? ? ? ? position: absolute;z-index: 9000;
? ? ? ? top: 100px;left: 100px;
? ? ? ? border: 1px solid #D5D5D5;background: #fff;
display:none;
? ? }
? ? .ui-dialog a{text-decoration: none;}
? ? /*標(biāo)題欄區(qū)域*/
? ? .ui-dialog-title{
? ? ? ? height: 48px;line-height: 48px; padding:0px 20px;color: #535353;font-size: 16px;
? ? ? ? border-bottom: 1px solid #efefef;background: #f5f5f5;
? ? ? ? cursor: move;
? ? ? ? user-select:none;
? ? }
? ? /*關(guān)閉按鈕設(shè)置*/
? ? .ui-dialog-closebutton{
? ? ? ? width: 36px;height: 36px;display: block;
? ? ? ? position: absolute;top: 0px;right: 0px;
? ? ? ? cursor: pointer;font-size: 12px;color:#666;
? ? }
? ? /*內(nèi)容區(qū)域*/
? ? .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-submit{
? ? ? ? width: 100%;height: 50px;background: #3b7ae3;border:none;font-size: 16px;color: #fff;
? ? ? ? outline: none;text-decoration: none;
? ? ? ? display: block;text-align: center;line-height: 50px;
? ? }
? ? .ui-dialog-submit:hover{
? ? ? ? background: #3f81b0;
? ? }
? ? /*遮罩層的樣式*/
? ?.ui-mask{?
display:none;
? ? ? ? background:rgba(0,0,0,.4);
? ? ? ? position: absolute;
top: 0px;z-index: 8000;
? ? }
? ? .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">
? ? ? ? ? ? <span>登錄通行證</span>
? ? ? ? ? ? <span id="btn_close" class="ui-dialog-closebutton">關(guān)閉</span>
? ? ? ? </div>
? ? ? ? <div class="ui-dialog-content">
? ? ? ? ? ? <div class="ui-dialog-pt15 ui-dialog-l40">
? ? ? ? ? ? ? ? <input type="text" value="手機(jī)/郵箱/用戶名" 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="javascript:;" class="ui-dialog-submit">登錄</a>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="ui-dialog-l40">
? ? ? ? ? ? ? ? <a href="#">立即注冊(cè)</a>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
? ? <div class="link">
? ? ? ? <a href="javascript:;" id='bgn_login'>登錄</a>
? ? </div>
? ? <div class="ui-mask" id="mask"></div>
</body>
<script>
? ? window.onload = function() {
var offsetX = 0;
var offsetY = 0;
var isDrag = false;
var bw = document.documentElement.clientWidth;
var bh = document.documentElement.clientHeight;
function g(id) {
return document.getElementById(id);
}
//自動(dòng)居中
function autoCenter(ele) {
var bodyW = bw;
var bodyH = bh;
var eleW = ele.offsetWidth;
var eleH = ele.offsetHeight;
ele.style.left = (bodyW - eleW) / 2 + 'px';
ele.style.top = (bodyH - eleH) / 2 + 'px';
}
//全屏
function fillToBody(ele) {
ele.style.width = bw + 'px';
ele.style.height = bh + 'px';
}
//拖動(dòng)
function dragPanel(ele) {
ele.onmousedown = function(e) {
var e = e || window.event;
offsetX = e.pageX - this.offsetLeft;
offsetY = e.pageY - this.offsetTop;
isDrag = true;
}
document.onmousemove = function(e) {
var e = e || window.event;
//獲取鼠標(biāo)的最新的位置
var stopX = e.pageX - offsetX;
var stopY = e.pageY - offsetY;
//可拖動(dòng)范圍的最大值
var stopX_r = bw - ele.offsetWidth;
var stopY_b = bh - ele.offsetHeight;
//限定可拖動(dòng)的范圍
stopX = Math.min(Math.max(stopX,0), stopX_r);
stopY = Math.min(Math.max(stopY,0), stopY_b);
if(isDrag) {
ele.style.left = stopX? + 'px';
ele.style.top = stopY? + 'px';
}
}
document.onmouseup = function() {
isDrag = false;
}
}
dragPanel(g('dialog'));
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';
}
g('bgn_login').onclick = function() {
showDialog();
}
g('btn_close').onclick = function() {
hideDialog();
}
window.onresize = function() {
autoCenter(g('dialog'));
? ? fillToBody(g('mask'));
}
}
</script>
</html>
2018-11-22
找到原因了document.documentElement.clientWidth不能設(shè)置成全局變量