QQ登录面板
最近在慕课网学习DOM事件的基础知识,有个任务是让实现QQ面板拖拽效果,于是想先自己先写写再去看老师的代码。发现,其实自己一步一步写会收获很大。以下是QQ登录面板的具体实现(图片是下载老师现成的,haha,不过代码都是自己的,自学的初级阶段,有错请多多指教)。
效果图
具体要求
- 看着老师的效果自己揣测的→_→*
- 用HTML/CSS实现基本的布局和样式,JS实现简单的交互
- 点击关闭按钮,关闭QQ登录面板
- 可以切换登陆时的状态
- 当mousedown在 QQ logo 区域并移动时,面板随鼠标移动
实现
- HTML部分
<div id="QQLoginSurface">
<div id="closeBox"></div>
<div id="LoginIcon"></div>
<div id="QQLogin">
<div id="countNumber">
<span id="countNumberText"><b>账	号:</b> </span>
<input type="text" placeholder="QQ号码或Email账号" id="inputCountNumber"/>
</div>
<div id="countPassword">
<span id="countPasswordText"><b>密	码:</b> </span>
<input type="password" id="inputCountPassword" />
</div>
</div>
<div id="loginButton"></div>
<div id="loginState" title="选择登录状态">
<span id="loginStateIcon" class="onlineImage"></span>
<span id="loginStateDropdownButton"></span>
<span id="loginStateText">我在线上</span>
</div>
<ul id="stateBox">
<li class="differentState" data-text="我在线上 0">
<span class="differentStateImage onlineImage" id="online"></span>
<span>我在线上</span>
</li>
<li class="differentState" data-text="离开 18">
<span class="differentStateImage awayImage" id="away"></span>
<span>离开</span>
</li>
<li class="differentState" data-text="忙碌 36">
<span class="differentStateImage buzyImage" id="buzy"></span>
<span>忙碌</span>
</li>
<li class="differentState" data-text="隐身 54">
<span class="differentStateImage invisibleImage" id="invisible"></span>
<span>隐身</span>
</li>
<li class="differentState" data-text="Q我吧 72">
<span class="differentStateImage callMeImage" id="callMe"></span>
<span>Q我吧</span>
</li>
<li class="differentState" data-text="离线 90">
<span class="differentStateImage offlineImage" id="offline"></span>
<span>离线</span>
</li>
<li class="differentState" data-text="请勿打扰 108">
<span class="differentStateImage leaveMeImage" id="leaveMe"></span>
<span>请勿打扰</span>
</li>
</ul>
</div>
- CSS部分
body {
margin: 30px;
font-family: 'Microsoft YaHei';
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
/*去掉双击选中*/
}
span {
display: inline-block;
font-size: 13px;
}
input,button {
outline: none;
/*去掉聚焦边框*/
}
ul {
list-style: none;
}
#QQLoginSurface {
width: 380px;
height: 250px;
background-color: rgb(246, 246, 246);
border-radius: 0.5em;
box-shadow:0 0 3px 3px rgba(0,0,0,0.4);
}
#closeBox {
margin: 0;
width: 28px;
height: 28px;
background: url(../images/boxy_btn.png);
position: relative;
left: 362px;
top: -10px;
}
#closeBox:hover {
cursor: pointer;
}
#LoginIcon {
width: 200px;
height: 44px;
background: url(../images/login_window_logo.png);
background-position: 200px 0;
margin: -14px auto;
}
#LoginIcon:hover {
cursor: move;
}
#QQLogin {
width: 240px;
margin: 40px auto;
margin-bottom: 10px;
text-align: center;
}
#countNumberText,#countPasswordText {
font-size: 16px;
}
#inputCountNumber {
padding: 1px;
padding-left: 8px;
border: 1px rgba(0,0,0,0.2) solid;
height: 20px;
line-height: 18px;
border-radius: 10px;
}
#inputCountPassword {
padding: 1px;
padding-left: 8px;
border: 1px rgba(0,0,0,0.2) solid;
height: 20px;
line-height: 18px;
border-radius: 10px;
margin-top: 20px;
}
#loginButton {
display: inline-block;
width: 110px;
height: 35px;
background: url(../images/login_btn.png) no-repeat;
background-position: -112px -1px;
margin-left: 80px;
margin-top: 10px;
}
#loginButton:hover {
cursor: pointer;
}
#loginState {
display: inline-block;
position: relative;
left: 15px;
top: -8px;
}
#loginState:hover {
cursor: pointer;
}
#loginStateIcon {
width: 18px;
height: 18px;
background: url(../images/ptlogin.png);
}
#loginStateDropdownButton {
width: 18px;
height: 18px;
background: url(../images/ptlogin.png);
background-position: 0 -18px;
}
#loginStateText {
width: 60px;
height: 18px;
position: relative;
top: -5px;
left: -10px;
}
#stateBox {
width: 100px;
background-color: white;
padding: 5px;
margin: -18px 0 0 205px;
position: relative;
z-index: 1;
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
display: none;
}
#stateBox>.differentState {
padding-left: 5px;
}
#stateBox>.differentState:hover {
cursor: pointer;
background-color: rgb(128, 128, 128);
}
.differentStateImage {
background: url(../images/ptlogin.png) no-repeat;
width: 18px;
height: 18px;
}
.onlineImage {
background-position: 0 4px;
}
.awayImage {
background-position: -18px 4px;
}
.buzyImage {
background-position: -36px 4px;
}
.invisibleImage {
background-position: -54px 4px;
}
.callMeImage {
background-position: -72px 4px;
}
.offlineImage {
background-position: -90px 4px;
}
.leaveMeImage {
background-position: -108px 4px;
}
-JS部分
//关闭QQ登录面板
var QQLoginSurface = document.getElementById("QQLoginSurface");
var closeBox = document.getElementById("closeBox");
closeBox.addEventListener("click", function () {
QQLoginSurface.style.display = "none";
},
false);
//光标聚焦时, input的提示语句消失, 失焦时, input的提示语句再次出现
var inputCountNumber = document.getElementById("inputCountNumber");
inputCountNumber.addEventListener("focus", function () {
inputCountNumber.placeholder = "";
},
false);
inputCountNumber.addEventListener("blur", function () {
inputCountNumber.placeholder = "QQ号码或Email账号";
},
false);
//点击loginState后, stateBox列表出现
var loginState = document.getElementById("loginState");
var stateBox = document.getElementById("stateBox");
loginState.addEventListener("click", function () {
stateBox.style.display = "block";
}, false);
//选中ul中的状态,改变登录状态
var loginStateText = document.getElementById("loginStateText");
var loginStateIcon = document.getElementById("loginStateIcon");
stateBox.addEventListener("click", function (event) {
var target = event.target || window.event.target;
if (target.nodeName == "SPAN") {
var trueTarget = target.parentNode;
var dataText = trueTarget.getAttribute("data-text");
var dataTexts = dataText.split(" ");
} else if (target.nodeName == "LI") {
var dataText = target.getAttribute("data-text");
var dataTexts = dataText.split(" ");
}
loginStateText.innerHTML = dataTexts[0];
loginStateIcon.style.backgroundPositionX = -Number(dataTexts[1]) + "px";
stateBox.style.display = "none";
}, false);
//当stateBox的display属性为block时, 而紧接着的点击发生在非ul范围内时, display属性变为none
document.addEventListener("mousedown", function (event) {
x = event.clientX,
y = event.clientY
var stateboxbounds = stateBox.getBoundingClientRect();
if (stateBox.style.display == "block") {
if (x < stateboxbounds.left || x > stateboxbounds.right || y < stateboxbounds.top || y > stateboxbounds.bottom) {
stateBox.style.display = "none";
}
}
});
//让QQ面板在一定条件下随鼠标移动
var mouseDownPos;
var loginIcon = document.getElementById("LoginIcon");
loginIcon.addEventListener("mousedown", function (event) {
mouseDownPos = {
x: event.clientX,
y: event.clientY
};
});
document.addEventListener("mousemove", function (event) {
var diffX = event.clientX - mouseDownPos.x;
var diffY = event.clientY - mouseDownPos.y;
QQLoginSurface.style.left = diffX + "px";
QQLoginSurface.style.top = diffY + "px";
});
--让QQ面板在一定条件下随鼠标移动部分有bug,尽快修正--
果然代码是大爷,要好好伺候才行( •̀ ω •́ )y