                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /DOM事件探秘

自己做的面板，提示錯誤不知道如何解決

這是 html

<!DOCTYPE html>

<html>

<head>

? ? <meta charset="UTF-8">

? ? <title>Document</title>

? ? <link rel="stylesheet" href="css/master.css">

? ? <script type="text/javascript" src="js/script.js"></script>

</head>

<body>

? ? <div id="all">

? ? ? ? <div></div>

? ? ? ? <div>

? ? ? ? ? ? <span><img src="images/02d029edb652d44fdcbae37f448d6635.jpg"></span>

? ? ? ? ? ? <span>登陸</span>

? ? ? ? </div>

? ? ? ? <div>

? ? ? ? ? ? <div>

? ? ? ? ? ? ? ? <span>賬號:</span>

? ? ? ? ? ? ? ? <span ><input type="text" ></span>

? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="foot2 clearfix">

? ? ? ? ? ? ? ? <span>密碼:</span>

? ? ? ? ? ? ? ? <span><input type="text"></span>

? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="foot3 clearfix">

? ? ? ? ? ? ? ? <div id="foot3_left">登錄</div>

? ? ? ? ? ? ? ? <div class="foot3_right clearfix">

? ? ? ? ? ? ? ? ? ? <div></div>

? ? ? ? ? ? ? ? ? ? <div title="選擇在線狀態(tài)" id="right_box">

? ? ? ? ? ? ? ? ? ? ? ? <div id="login_show" class="right_box_1 online"></div>

? ? ? ? ? ? ? ? ? ? ? ? <div></div>

? ? ? ? ? ? ? ? ? ? ? ? <div id="stateTxt">線上</div>

? ? ? ? ? ? ? ? ? ? ? ? <ul id="panel_div">

? ? ? ? ? ? ? ? ? ? ? ? ? ? <li id="online clearfix">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="icon online"></div>?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<div>我在線上</div>?

? ? ? ? ? ? ? ? ? ? ? ? ? ? </li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? <li id="callme clearfix">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="icon callme"></div>?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<div>我在忙碌</div>?

? ? ? ? ? ? ? ? ? ? ? ? ? ? </li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? <li id="away clearfix">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="icon away"></div>?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<div>我在隱身</div>?

? ? ? ? ? ? ? ? ? ? ? ? ? ? </li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? <li id="busy clearfix">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="icon busy"></div>?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<div>我不在線</div>?

? ? ? ? ? ? ? ? ? ? ? ? ? ? </li>

? ? ? ? ? ? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? ? ? ? </ul>

? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? </div>

? ? ? ? </div>

? ? </div>

</body>

</html>

這是js

window.onload=drag;

function getByClass(clsName,parent){

? ? var oParent=parent?document.getElementById(parent):document,

? ? ? ? eles=[],

? ? ? ? elements=oParent.getElementsByTagName("*");

? ? for(var i=0,l=elements.length;i<l;i++){

? ? ? ? if(elements[i].className==clsName){

? ? ? ? ? ? eles.push(elements[i]);

? ? ? ? }

? ? }

? ? return eles;

}

function drag(){

? ? var oTittle = getByClass("YD","all")[0];

? ? //拖動

? ? oTittle.onmousedown=fnDown;

? ? var foot3_left = document.getElementById("foot3_left")

? ? foot3_left.onclick=function(){

? ? ? ? ? ? alert("哈哈")

? ? }

? ? //切換狀態(tài)

? ? var right_box = document.getElementById("right_box"),

? ? ? ? panel_div = document.getElementById("panel_div"),

? ? ? ? lis= panel_div.getElementsByTagName("li"),

? ? ? ? stateTxt = document.getElementById("stateTxt"),

? ? ? ? login_show =document.getElementById("login_show");

? ? ? ? right_box.onclick=function(e){

? ? ? ? ? ? e = e || window.event;

? ? ? ? ? ? if(e.stopPropagation){

? ? ? ? ? ? ? ? e.stopPropagation()

? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? e.cancelBubble=true

? ? ? ? ? ? }

? ? ? ? ? ? panel_div.style.display="block";

? ? ? ? }

? ? //鼠標(biāo)滑過、離開和點擊狀態(tài)列表時

? ? for(var i=0,l=lis.length;i<l;i++){

? ? ? ? lis[i].onmouseover=function(){

? ? ? ? ? ? this.style.background="#567";

? ? ? ? ? ? this.style.color="#fff"

? ? ? ? }

? ? ? ? lis[i].onmouseout=function(){

? ? ? ? ? ? this.style.background="#fff";

? ? ? ? ? ? this.style.color="#000"

? ? ? ? }

? ? ? ? lis[i].onclick=function(e){

? ? ? ? ? ? e = e || window.event;

? ? ? ? ? ? if(e.stopPropagation){

? ? ? ? ? ? ? ? e.stopPropagation()

? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? e.cancelBubble=true;

? ? ? ? ? ? }

? ? ? ? ? ? var id = this.id,

? ? ? ? ? ? panel_div.style.display="none";

? ? ? ? ? ? stateTxt.innerHTML=getByClass('select_text',id)[0].innerHTML;

? ? ? ? ? ? login_show.className=null;

? ? ? ? ? ? login_show.className="right_box_1 "+id;

? ? ? ? }

? ? }

}

function fnDown(event){

? ? event = event || window.event;

? ? var oDrag = document.getElementById("all");

// ? ?document.onmousemove=function(event){

// ? ? ? ?event = event || window.event;

// ? ? ? ?oDrag.style.left=event.clientX+"px";

// ? ? ? ?oDrag.style.top=event.clientY+"px"

// ? ?}

// ? ?光標(biāo)按下時光標(biāo)和面板之間的距離

? ? disxX=event.clientX-oDrag.offsetLeft,

? ? disxY=event.clientY-oDrag.offsetTop;

? ? document.onmousemove=function(event){

? ? ? ? event = event||window.event

? ? ? ? fnMove(event,disxX,disxY);

? ? }

? ? document.onmouseup=function(){

? ? ? ? ?document.onmousemove=null;

? ? ? ? ?document.onmouseup=null;

? ? ? ??

? ? }

}

function fnMove(e,posX,posY){

? ? ?var oDrag = document.getElementById("all"),

? ? ? ? ?l=e.clientX-posX,

? ? ? ? ?t=e.clientY-posY;

? ? ? ? ?winW=document.documentElement.clientWidth || document.body.clientWidth,

? ? ? ? ?winH=document.documentElement.clientHeight || document.body.clientHeight,

? ? ? ? ?maxW=winW-oDrag.offsetWidth-10,

? ? ? ? ?maxH=winH-oDrag.offsetHeight;

? ? ? ? ?if(l<0){

? ? ? ? ? ? ?l=0

? ? ? ? ?}else if(l>maxW){

? ? ? ? ? ? ?l=maxW

? ? ? ? ?}

? ? ? ? ?if(t<0){

? ? ? ? ? ? ?t=10

? ? ? ? ?}else if(t>maxH){

? ? ? ? ? ? ?t=maxH

? ? ? ? ?}

? ? ? ? ?oDrag.style.left=l+"px";

? ? ? ? ?oDrag.style.top=t+"px"

? ??

}

這是css

/*重置樣式*/

body,div,p,ul,ol,dl,dt,dd,li,form,input,table,th,td,img,h1,h2,h3,h4,h5,h6 { margin: 0;padding: 0;}

body { background: #FFF; color: #000; font-size: 12px; font-style: normal; font-family:'Microsoft Yahei','微軟雅黑','Simsun','宋體','Arial', sans-serif;}

em, b, i { font-style:normal;}

li { list-style:none;}

img { border:none;}

/*通用*/

.gogo{ margin-left: 10px;}

.come{ margin-top: 20px;}

.hide {display: none;}

.flt {float:left;}

.frt {float:right;}

.clear { clear: both;}

.clearfix { *zoom: 1;}?

.clearfix:before, .clearfix:after { display: table; line-height: 0; content: "";}

.clearfix:after { clear: both;}

.pd_left20{ padding-left: 20px;}

.all{

? ? width: 450px;

? ? height: 270px;

? ? border: 2px solid #ccc;

? ? box-shadow: 0 3px 16px #ddd, 0 0 3px #ddd, 0 0 3px #ddd;

? ? position: absolute;

? ? left: 35%;

? ? top: 200px;

? ? border-radius: 10px;

? ??

}

.head{

? ? height: 80px;

? ? margin-top: 10px;

? ? width: 450px;

}

.head .span1{

? ? width: 80px;

? ? height: 80px;

? ? margin-left: 150px;

? ? display:block;

? ? float: left;

}

.head .span1 img{

? ? width: 60px;

? ? height: 60px;

}

.head .span2{

? ? height: 60px;

? ? line-height: 60px;

? ? display: block;

? ? width: 80px;

? ? float: left;

? ? font-size: 22px;

? ? font-weight: bold

}

.foot{

? ? width: 450px;

? ? height: 180px;

}

.foot1{

? ? width: 330px;

? ? padding-left: 120px;

? ? height: 40px;

? ? margin-top: 20px;

}

.foot2{

? ? width: 330px;

? ? height: 40px;

? ? padding-left: 120px;

}

.foot1 .span1{

? ? font-weight: bolder;

? ? font-size: 18px;

}

.foot1 input{

? ? border-radius: 10px;

? ? box-shadow: none !important;

? ? outline:none;

? ? padding-left: 10px;

? ? border: none;

? ? border: 1px solid #ccc;

? ? height: 20px;

}

.foot2 .span1{

? ? font-weight: bolder;

? ? font-size: 18px;

}

.foot2 input{

? ? border-radius: 10px;

? ? box-shadow: none !important;

? ? outline:none;

? ? padding-left: 10px;

? ? border: none;

? ? border: 1px solid #ccc;

? ? height: 20px;

}

.foot3{

? ? margin-top: 10px;

? ? height: 35px;

? ? width: 450px;

}

.foot3_left{

? ? width: 100px;

? ? height: 35px;

? ? line-height: 35px;

? ? background-color: #08c;

? ? color: #fff;

? ? border-radius: 10px;

? ? text-align: center;

? ? cursor: pointer;

? ? margin-left: 120px;

? ? float: left;

}

.YD{

? ? position: absolute;

? ? width: 450px;

? ? height: 80px;

? ? cursor: move;

}

.right_box{

? ? float: left;

? ? width: 200px;

? ? height: 30px;

? ? font-size: 14px;

? ? margin-left: 15px;

? ? margin-top: 10px;

? ? cursor: pointer;

? ? position: relative;

}

.online{

? ? background-image: url(../images/qwdr.png);

? ? background-repeat: no-repeat;

? ? background-size: 20px 20px;

? ??

}

.away{

? ? background-image: url(../images/qwdr.png);

? ? background-repeat: no-repeat;

? ? background-size: 20px 20px;

}

.callme{

? ? background-image: url(../images/qwdr.png);

? ? background-repeat: no-repeat;

? ? background-size: 20px 20px;

}

.busy{

? ? background-image: url(../images/qwdr.png);

? ? background-repeat: no-repeat;

? ? background-size: 20px 20px;

}

.right_box_1 {

? ? width: 25px;

? ? height: 25px;

? ? float: left

}

.right_box_2{

? ? background-image: url(../images/jiantou.png);

? ? background-repeat: no-repeat;

? ? background-size: 10px 6px;

? ? margin-top: 6px;

? ? width: 20px;

? ? height: 20px;

? ? float: left

}

.panel_div{

? ? width: 100px;

? ? height: 100px;

? ? position: absolute;

? ? top:0px;

? ? left: 0;

? ? display: none;

? ? background-color: #fff;

? ? border: 1px solid #ccc

}

.icon{

? ? width: 25px;

? ? height: 25px;

? ? float: left;

}

.select_text{

? ? width: 70px;

? ? height: 25px;

? ? margin-left: 3px;

? ? float: left;

? ? font-size: 12px;

? ? padding-top: 2px;

}

.panel_div li{

? ? width: 100px;

? ? height: 25px;

}

大酒神之戟

2016-06-08

源自：DOM事件探秘 4-3

關(guān)注問題我要回答

357

操作

收起

4 回答

盯叮町玎仃
2016-06-08

JS

window.onload=drag;

function?getByClass(clsName,parent){

????var?oParent=parent?document.getElementById(parent):document,

????????eles=[],

????????elements=oParent.getElementsByTagName("*");

????for(var?i=0,l=elements.length;i<l;i++){

????????if(elements[i].className==clsName){

????????????eles.push(elements[i]);

????????}

????}

????return?eles;

}



function?drag(){

????var?oTittle?=?getByClass("YD","all")[0];

????//拖動

????oTittle.onmousedown=fnDown;

????var?foot3_left?=?document.getElementById("foot3_left");

????//切換狀態(tài)

????var?right_box?=?document.getElementById("right_box"),

????????panel_div?=?document.getElementById("panel_div"),

????????lis=?panel_div.getElementsByTagName("li"),

????????stateTxt?=?document.getElementById("stateTxt"),

????????login_show?=document.getElementById("login_show");

????????right_box.onclick=function(e){

????????????e?=?e?||?window.event;

????????????if(e.stopPropagation){

????????????????e.stopPropagation();

????????????}else{

????????????????e.cancelBubble=true;

????????????}

????????????panel_div.style.display="block";

????????}

????//鼠標(biāo)滑過、離開和點擊狀態(tài)列表時

????for(var?i=0,l=lis.length;i<l;i++){

????????lis[i].onmouseover=function(){

????????????this.style.background="#567";

????????????this.style.color="#fff"

????????}

????????lis[i].onmouseout=function(){

????????????this.style.background="#fff";

????????????this.style.color="#000"

????????}

????????lis[i].onclick=function(e){

????????????e?=?e?||?window.event;

????????????if(e.stopPropagation){

????????????????e.stopPropagation()

????????????}else{

????????????????e.cancelBubble=true;

????????????}

????????????var?id?=?this.id;

????????????panel_div.style.display='none';

????????????stateTxt.innerHTML=getByClass('sTxt',id)[0].innerHTML;

????????????login_show.className=null;

????????????login_show.className="right_box_1?"+id;

????????}

????}

}


function?fnDown(event){

????event?=?event?||?window.event;

????var?oDrag?=?document.getElementById("all");

//????document.onmousemove=function(event){

//????????event?=?event?||?window.event;

//????????oDrag.style.left=event.clientX+"px";

//????????oDrag.style.top=event.clientY+"px"

//????}

//????光標(biāo)按下時光標(biāo)和面板之間的距離

????disxX=event.clientX-oDrag.offsetLeft,

????disxY=event.clientY-oDrag.offsetTop;

????document.onmousemove=function(event){

????????event?=?event||window.event

????????fnMove(event,disxX,disxY);

????}

????document.onmouseup=function(){

?????????document.onmousemove=null;

?????????document.onmouseup=null;

????????

????}

}


function?fnMove(e,posX,posY){

?????var?oDrag?=?document.getElementById("all"),

?????????l=e.clientX-posX,

?????????t=e.clientY-posY;

?????????winW=document.documentElement.clientWidth?||?document.body.clientWidth,

?????????winH=document.documentElement.clientHeight?||?document.body.clientHeight,

?????????maxW=winW-oDrag.offsetWidth-10,

?????????maxH=winH-oDrag.offsetHeight;

?????????if(l<0){

?????????????l=0

?????????}else?if(l>maxW){

?????????????l=maxW

?????????}

?????????if(t<0){

?????????????t=10

?????????}else?if(t>maxH){

?????????????t=maxH

?????????}

?????????oDrag.style.left=l+"px";

?????????oDrag.style.top=t+"px"

????

}

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

盯叮町玎仃
2016-06-08

CSS

body,div,p,ul,ol,dl,dt,dd,li,form,input,table,th,td,img,h1,h2,h3,h4,h5,h6?{?margin:?0;padding:?0;}
body?{?background:?#FFF;?color:?#000;?font-size:?12px;?font-style:?normal;?font-family:'Microsoft?Yahei','微軟雅黑','Simsun','宋體','Arial',?sans-serif;}
em,?b,?i?{?font-style:normal;}
li?{?list-style:none;}
img?{?border:none;}

/*通用*/
.all{
????width:?450px;

????height:?270px;

????border:?2px?solid?#ccc;

????box-shadow:?0?3px?16px?#ddd,?0?0?3px?#ddd,?0?0?3px?#ddd;

????position:?absolute;

????left:?35%;

????top:?200px;

????border-radius:?10px;

????

}
.gogo{?margin-left:?10px;}
.come{?margin-top:?20px;}
.hide?{display:?none;}
.flt?{float:left;}
.frt?{float:right;}
.clear?{?clear:?both;}
.clearfix?{?*zoom:?1;}?
.clearfix:before,?.clearfix:after?{?display:?table;?line-height:?0;?content:?"";}
.clearfix:after?{?clear:?both;}
.pd_left20{?padding-left:?20px;}


.head{

????height:?80px;

????margin-top:?10px;

????width:?450px;

}

.head?.span1{

????width:?80px;

????height:?80px;

????margin-left:?150px;

????display:block;

????float:?left;

}

.head?.span1?img{

????width:?60px;

????height:?60px;

}

.head?.span2{

????height:?60px;

????line-height:?60px;

????display:?block;

????width:?80px;

????float:?left;

????font-size:?22px;

????font-weight:?bold

}

.foot{

????width:?450px;

????height:?180px;

}

.foot1{

????width:?330px;

????padding-left:?120px;

????height:?40px;

????margin-top:?20px;

}

.foot2{

????width:?330px;

????height:?40px;

????padding-left:?120px;

}

.foot1?.span1{

????font-weight:?bolder;

????font-size:?18px;

}

.foot1?input{

????border-radius:?10px;

????box-shadow:?none?!important;

????outline:none;

????padding-left:?10px;

????border:?none;

????border:?1px?solid?#ccc;

????height:?20px;

}

.foot2?.span1{

????font-weight:?bolder;

????font-size:?18px;

}

.foot2?input{

????border-radius:?10px;

????box-shadow:?none?!important;

????outline:none;

????padding-left:?10px;

????border:?none;

????border:?1px?solid?#ccc;

????height:?20px;

}

.foot3{

????margin-top:?40px;

????height:?35px;

????width:?450px;

}

.foot3_left{

????width:?100px;

????height:?35px;

????line-height:?35px;

????background-color:?#08c;

????color:?#fff;

????border-radius:?10px;

????text-align:?center;

????cursor:?pointer;

????margin-left:?50px;

????float:?left;

}

.YD{
????/*position:?absolute;
????width:?450px;
????height:?80px;

????cursor:?move;
????*/
????margin-left:?150px;
????????????margin-top:?5px;
????????????width:?100px;
????????????height:?50px;
????????????cursor:?move;

}




.right_box{

????float:?left;

????width:?200px;

????height:?30px;

????font-size:?14px;

????margin-left:?40px;

????margin-top:?10px;

????cursor:?pointer;

????position:?relative;

}

.online{

????background-image:?url(../images/qwdr.png);

????background-repeat:?no-repeat;

????background-size:?20px?20px;

????

}

.away{

????background-image:?url(../images/qwdr.png);

????background-repeat:?no-repeat;

????background-size:?20px?20px;

}

.callme{

????background-image:?url(../images/qwdr.png);

????background-repeat:?no-repeat;

????background-size:?20px?20px;

}

.busy{

????background-image:?url(../images/qwdr.png);

????background-repeat:?no-repeat;

????background-size:?20px?20px;

}

.right_box_1?{

?????/*width:?25px;*/

????height:?25px;

????float:?left

}

.right_box_2{

????background-image:?url(../images/jiantou.png);

????background-repeat:?no-repeat;

????background-size:?10px?6px;

????margin-top:?6px;

????width:?20px;

????height:?20px;

????float:?left

}

.panel_div{

????width:?100px;

????height:?100px;

????position:?absolute;

????top:0px;

????left:?0;

????display:?none;

????background-color:?#fff;

????border:?1px?solid?#ccc

}

.icon{

????width:?25px;

????height:?25px;

????float:?left;

}

.select_text{

????width:?70px;

????height:?25px;

????margin-left:?3px;

????float:?left;

????font-size:?12px;

????padding-top:?2px;

}

.panel_div?li{

????width:?100px;

????height:?25px;

}

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

盯叮町玎仃
2016-06-08

HTML
<!DOCTYPE?html>
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
????<meta?charset="UTF-8">
????<title>Document</title>
?????<link?href="css/main.css"?rel="stylesheet"?/>
????<script?src="js/drag.js"></script>
</head>
<body>
????<div?id="all"?class='all'>
????????<div?class?='YD'?style="?width:160px;?overflow:hidden?">
????????????<!--<img?src="images/02d029edb652d44fdcbae37f448d6635.jpg">-->
????????????<span><img?src="images/login_window_logo.png"?></span>
????????</div>
????????<div>
????????????<div?class="foot2?clearfix">
????????????????<span>賬?號:</span>
????????????????<span?><input?type="text"?></span>
????????????</div>
????????????<div?class="foot2?clearfix">
????????????????<span>密?碼:</span>
????????????????<span><input?type="text"></span>
????????????</div>
????????????<div?class="foot3??foot3_left?clearfix">
????????????????<div?id="foot3_left"?><p?style='font-size:?20px;'>登?錄</p></div>
????????????</div>

????????????????<!--具體狀態(tài)選擇-->
????????????????<!--<div?class="foot3_right?clearfix">-->
????????????????<div?class="right_box">
????????????????????<div?title="選擇在線狀態(tài)"?id="right_box">
????????????????????????<div?id="login_show"?class="right_box_1?online"></div>
????????????????????????<div?id="stateTxt">線上</div>

????????????????????????<ul?id="panel_div">
????????????????????????????<li?id="online">
???????????????????????????????<div?class="state?online"></div>?
???????????????????????????????<div?class='sTxt'>我在線上</div>?
????????????????????????????</li>
????????????????????????????<li?id="callme">
???????????????????????????????<div?class="state?callme"></div>?
???????????????????????????????<div?class='sTxt'>我在忙碌</div>?
????????????????????????????</li>
????????????????????????????<li?id="away">
???????????????????????????????<div?class="state?away"></div>?
???????????????????????????????<div?class='sTxt'>我在隱身</div>?
????????????????????????????</li>
????????????????????????????<li?id="busy">
???????????????????????????????<div?class="state?busy"></div>?
???????????????????????????????<div?class='sTxt'>我不在線</div>?
????????????????????????????</li>
????????????????????????</ul>
????????????????????</div>
????????????????</div>
????????????
????????</div>
????</div>
</body>
</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答