                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /鼠標拖拽效果

不會寫怎么辦呢

。。。。。

慕先生7084551

2017-05-04

源自：鼠標拖拽效果 4-3

關注問題我要回答

1480

操作

收起

0 回答

田心楓回答被采納 +3 積分
2017-05-04

<!DOCTYPE?html>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>

<title>慕課網(wǎng)-拖拽效果</title>

<style?type="text/css">

????body{background:?url(images/baidu_demo.png)?#fff?top?center?no-repeat;
????????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;
????}

????.ui-dialog?a{text-decoration:?none;}

????/*標題欄區(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;
????}

????/*關閉按鈕設置*/
????.ui-dialog-closebutton{
????????width:?16px;height:?16px;display:?block;
????????position:?absolute;top:?12px;right:?20px;
????????background:?url(images/close_def.png)?no-repeat;cursor:?pointer;

????}
????.ui-dialog-closebutton:hover{background:url(images/close_hov.png);}

????/*內(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;
????}

????/*兩個輸入框的icon設置*/
????.ui-dialog-input-username{
????????background:?url(images/input_username.png)?no-repeat?2px?;
????}
????.ui-dialog-input-password{
????????background:?url(images/input_password.png)?no-repeat?2px?;
????}

????/*提交按鈕的樣式*/
????.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{?
????????width:?100%;height:100%;background:?#000;
????????position:?absolute;top:?0px;height:?0px;z-index:?8000;
????????opacity:0.4;?filter:?Alpha(opacity=40);
????}

????.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="link">
<a?href="javascript:showDialog();">登錄</a>
</div>
<div?class="ui-mask"?id="mask"?onselectstart="return?false"></div>

<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?=?el.offsetWidth;
????????var?elH?=?el.offsetHeight;

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

????}

????//??自動擴展元素到全部顯示區(qū)域
????function?fillToBody(?el?){
????????el.style.width??=?document.documentElement.clientWidth??+'px';
????????el.style.height?=?document.documentElement.clientHeight?+?'px';
????}

</script>

</body>
</html>