亚洲AV码一区二区三区,天天草夜夜干狠狠射,七大叔狠狠射天天射

第1章案例效果展示及原理分析
視頻：1-1 效果展示及原理分析(02:03)

實戰題

學習完《三個關鍵鼠標拖拽事件》內容后，來檢驗一下吧！在右側的編輯器中補全相應的代碼！有三個任務需要完成。

任務

任務1：請在右側編輯器的第165行補充完整為 #dialogTitle 元素設置事件監聽的API

任務2：請在右側編輯器的第182行補充完整腳本中，鼠標移動時，計算浮層新位置 moveX 的代碼

任務3：請在右側編輯器的第190行補充完整腳本中，鼠標松開后的處理代碼

溫馨提示：完成的任務要與要求的代碼效果相一致才可以通過本次測試，否則就再看一遍視頻哦！

?不會了怎么辦

index.html

<!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) #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;} /*標題欄區域*/ .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);} /*內容區域*/ .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'; } // 自動擴展元素到全部顯示區域 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').【任務1】('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 = 【任務2】 moveY = mouseY - mouseOffsetY; g('dialog').style.left = moveX + 'px'; g('dialog').style.top = moveY + 'px'; } } // 鼠標事件3 －鼠標松開的時候（標記元素為不可拖動即可） document.onmouseup = function(){ 【任務3】 } </script> </body> </html>

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

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

5-3 實戰題

實戰題

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

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

5-3 實戰題

熱搜

最近搜索清空

實戰題

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～