老師的放上去的代碼怎么和課程里的不一致
老師的放上去的代碼怎么和課程里的不一致，我是用課程中的代碼，有一些奇怪的現(xiàn)象，希望老師放一下視頻里的源代碼。
Ginger_Z
2016-11-16
0 回答
舉報(bào)
0/150
提交
取消
2016-12-07
我從最后一課里拷出來的，可以參考~
===============================================================
<!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) 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;
? ? }
? ? .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="手機(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="#" class="ui-dialog-submit">登錄</a>
</div>
<div class="ui-dialog-l40">
<a href="#">立即注冊(cè)</a>
</div>
</div>
</div>
<div class="ui-mask" id="mask" onslectstart="return false"></div>
<div class="link">
<a href="javascript:showDialog();">登錄</a>
</div>
<script type="text/javascript">
? ? ? ? // ?獲取元素對(duì)象
? ? ? ? function g(id){ return document.getElementById(id); }
? ? ? ? // ?自動(dòng)居中 - 登錄浮層 ( 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';
? ? ? ? }
? ? ? ? // ?自動(dòng)全屏 - 遮罩
? ? ? ? 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; ?// ?是否可拖拽的標(biāo)記
? ? ? ? // ?鼠標(biāo)事件1 － 在標(biāo)題欄上按下（要計(jì)算鼠標(biāo)相對(duì)拖拽元素的左上角的坐標(biāo)，并且標(biāo)記元素為可拖動(dòng)）
? ? ? ? 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;
? ? ? ? })
? ? ? ? // ?鼠標(biāo)事件2 － 鼠標(biāo)移動(dòng)時(shí)（要檢測(cè)，元素是否可標(biāo)記為移動(dòng)，如果是，則更新元素的位置，到當(dāng)前鼠標(biāo)的位置［ps：要減去第一步中獲得的偏移］）
? ? ? ? document.onmousemove = function( e ){
? ? ? ? ? ? var e = e || window.event;
? ? ? ? ? ? var mouseX = e.pageX; ? // 鼠標(biāo)當(dāng)前的位置
? ? ? ? ? ? var mouseY = e.pageY;
? ? ? ? ? ? var moveX = 0; ?// ?浮層元素的新位置
? ? ? ? ? ? var moveY = 0;
? ? ? ? ? ? if( isDraging === true ){
? ? ? ? ? ? ? ? moveX = mouseX - mouseOffsetX;
? ? ? ? ? ? ? ? moveY = mouseY - mouseOffsetY;
? ? ? ? ? ? ? ? // ?范圍限定 ? moveX > 0 并且 ?moveX < (頁(yè)面最大寬度 - 浮層的寬度)
? ? ? ? ? ? ? ? // ? ? ? ? ? ?moveY > 0 并且 ?movey < (頁(yè)面最大高度 - 浮層的高度)
? ? ? ? ? ? ? ? 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';
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // ?鼠標(biāo)事件3 － 鼠標(biāo)松開的時(shí)候（標(biāo)記元素為不可拖動(dòng)即可）
? ? ? ? document.onmouseup = function(){
? ? ? ? ? ? isDraging = false;?
? ? ? ? }
? ? ?// ?展現(xiàn)登錄浮層
? ? ? ? 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>