亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

幫我看下我的代碼的錯誤,感謝

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>鼠標拖拽效果</title>

</head>

<style type="text/css">

*{margin: 0;padding: 0;}

body{background: url(images/baidu_demo.png) no-repeat top center;position: relative;}

.link{position: absolute;top: 0;right: 0;}

.ui-dialog{width: 380px;height: auto;z-index: 1000;position: absolute;top: 0;background: #fff;}

.dialogTit{height: 48px;background: #f5f5f5;line-height: 48px;color: #535353;padding-left: 20px;position: relative;}

.dialogBtn{background: url(images/close_def.png) no-repeat;position: absolute;top: 10px;right: 10px;width: 16px;height: 16px;}

.dialogBtn:hover{background: url(images/close_hov.png) no-repeat;}

.dialogCon{padding: 20px;}

.dialogCon input{display: block;height: 40px;line-height: 40px;border: 1px solid #d5d5d5;width: 305px;margin-bottom: 20px;padding: 0 10px 0 25px;font-size: 16px;}

.dialogCon .name{background: url(images/input_username.png) no-repeat;}

.dialogCon .pass{background: url(images/input_password.png) no-repeat;}

.dialogCon a{display: block;text-align: right;text-decoration: none;font-size: 12px;}

.dialogCon button{display: block;width: 340px;height: 40px;line-height: 40px;border: none;background: #3f81b0;font-size: 18px;color: #fff;margin: 20px 0;}

.ui-mask{background: rgba(0,0,0,0.5);height: 1000px;width: 1000px;z-index: 999;}

</style>

<body>

<div><a href="javascript:;">登錄</a></div>

<div id="mask"></div><!-- mask遮罩層 -->

<div id="dialog">

<div id="dialogTit">

登錄通行證

<a href="#"></a>

</div>

<form>

<input type="text" placeholder="手機/郵箱/用戶名">

<input type="password" placeholder="密碼">

<a href="#">忘記密碼</a>

<button>登錄</button>

<a href="#">立即注冊</a>

</form>

</div><!-- dialog登錄提示框 -->

</body>

<script type="text/javascript">

//獲取元素對象

function g(id){return document.getElementById(id);}


//自動居中元素(el = Element)

function autoCenter(el){

//獲得窗口顯示區域的寬

var bodyW=document.documentElement.clientWidth;

var bodyH=document.documentElement.clientHeight;

? ??

? ? //獲得元素對象的實際寬度

? ? var elW=Element.offsetWidth; ? ?

? ? var elH=Element.offsetHeight;?


? ? //設置元素對象的位置

? ? el.style.left=(bodyW-elW)/2+'px';

? ? el.style.top=(bodyH-elH)/2+'px';

}


//自動擴展元素到全部顯示區域

function fillToBody(el){

el.style.width=document.documentElement.clientWidth;

el.style.height=document.documentElement.clientHeight;

}


//三個鼠標事件

//偏移

var mouseOffsetX=0;

var mouseOffsetY=0;

//標記是否為可拖動

var isDraging=false;

//在標題欄上按下時,要計算鼠標相對拖拽元素的左上角的坐標,并標記元素為可拖動。

g('dialogTit').addEventListener('mousedown',function(e){

var e=e||window.event;//兼容IE鼠標獲取的方法

//計算鼠標的偏移值,鼠標按下去時的鼠標位置減去登陸浮層相對于頁面左邊的位置

mouseOffsetX=e.pageX-g('dialog').offsetLeft;

mouseOffsetY=e.pageY-g('dialog').offsetTop;

isDraging=true;

})

//鼠標開始移動,要檢測登錄浮層是否可標記為移動,如果是,則更新元素的位置到當前鼠標的位置(注意:要減去第一步中獲得的偏移)。

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=moveX-mouseOffsetX;

moveY=moveY-mouseOffsetY;

g('dialog').style.left=moveX+'px';

g('dialog').style.top=moveY+'px';

}

}

//鼠標松開的時候,標記元素為不可拖動狀態即可。

document.onmouseup=function(){

isDraging=false;

}

</script>

</html> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?


正在回答

舉報

0/150
提交
取消

幫我看下我的代碼的錯誤,感謝

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號