前言:这是跟着慕课网一个老师的视频做的,这几天在重新的梳理自己,写完这个例子要系统的学一下jQuery,我司现在用的还是比较多,毕竟用了它不用考虑IE兼容性,可以让开发更有效率。
1.项目需求及基本的HTML
和CSS
相信大家都用过QQ登陆框,它可以在页面中任意的拖拽,然后点击状态可以切换各种状态。
首先做出HTML
的结构
<div class="loginPanel" id="loginPanel">
<!-- 关闭区域 -->
<div style="position: relative; z-index: 1;">
<div class="ui_boxyClose" id="ui_boxyClose"></div>
</div>
<!-- QQ图标以及点击区域 -->
<div class="login_logo_webqq"></div>
<!-- 输入框区域 -->
<div class="inputs">
<div class="sign-input"><span>帐 号:</span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" class="input01" tabindex="1" value="QQ号码或Email帐号" onFocus="if (value =='QQ号码或Email帐号'){value =''}" onBlur="if (value ==''){value='QQ号码或Email帐号';}" /></span></div>
<div class="sign-input"><span>密 码:</span><span><input name="p" id="p" maxlength="16" type="password" class="input01" tabindex="2" /></span></div>
</div>
<!-- 底部区域 -->
<div class="bottomDiv">
<!-- 登录按钮 -->
<div class="btn" style="float: left"></div>
<div>
<div id="loginState" class="login-state-trigger login-state-trigger2 login-state" title="选择在线状态">
<!-- 状态图标 -->
<div id="loginStateShow" class="login-state-show online">状态</div>
<!-- 下拉小角标 -->
<div class="login-state-down">下</div>
<!-- 默认的状态 -->
<div class="login-state-txt" id="login2qq_state_txt">在线</div>
<!-- 隐藏的下拉菜单 -->
<ul id="loginStatePanel" class="statePanel login-state" style="display: none">
<li id="online" class="statePanel_li">
<div class="stateSelect_icon online"></div>
<div class="stateSelect_text">我在线上</div>
</li>
<li id="callme" class="statePanel_li">
<div class="stateSelect_icon callme"></div>
<div class="stateSelect_text">Q我吧</div>
</li>
<li id="away" class="statePanel_li">
<div class="stateSelect_icon away"></div>
<div class="stateSelect_text">离开</div>
</li>
<li id="busy" class="statePanel_li">
<div class="stateSelect_icon busy"></div>
<div class="stateSelect_text">忙碌</div>
</li>
<li id="silent" class="statePanel_li">
<div class="stateSelect_icon silent"></div>
<div class="stateSelect_text">请勿打扰</div>
</li>
<li id="hidden" class="statePanel_li">
<div class="stateSelect_icon hidden"></div>
<div class="stateSelect_text">隐身</div>
</li>
</ul>
</div>
</div>
</div>
</div>
2.实现拖拽登录框
CSS部分省略不写
由于涉及到大量的操作class类名的操作,首先封装一个可以兼容IE取class类名的函数,因为IE10以前是不支持
document.getElementByClassName()
/**
*
* @clsName 要找的className的名字
* @parent 可选参数,传入父元素就在父元素下找所有的className
*/
function getByClass(clsName, parent) {
//如果可以用getElementsByClassName
if(document.getElementsByClassName){
return document.getElementsByClassName(clsName);
}
//加入传入的parent存在就用document.getElementById(parent)取父元素,减少判断,否则oParent就等于document
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;
}
-
在页面加载完成后执行一个函数
window.onload = drag;
函数drag
function drag(){
//首选取出要点击然后拖拽的区域
var oTitle = getByClass('login_logo_webqq', 'loginPanel')[0];
//然后给这个元素绑定一个鼠标按下时候的时间,鼠标按下时执行函数fnDown()
oTitle.onmousedown = fnDown;
}
函数
fnDown()
function fnDowm(event) {
//兼容一下IE的事件
event = event || window.event;
//取到整个要拖拽的登陆框的id
var oDrag = document.getElementById('loginPanel'),
//光标按下时,光标和面板之间的距离
//event.clientX是光标按下时,光标距离窗口水平方向的距离
//event.clientY是光标按下时,光标距离窗口垂直方向的距离
//oDrag.offsetLeft面板距离窗口的水平距离
disX = event.clientX - oDrag.offsetLeft,
disY = event.clientY - oDrag.offsetTop;
//因为光标是在整个窗口移动,所以为窗口绑定一个鼠标移动的事件
document.onmousemove = function(event){
event = event || window.event;
fnMove(event,disX,disY);
}
}
函数
fnMove()
只需要实现光标按下时,光标移动到某点时,登录框处的位置恰好等于光标此时减去光标到登陆框边缘的距离
//
function fnMove(e,posX,posY){
var oDrag = document.getElementById('loginPanel');
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;
}
//及时更新登录框的style.left和right信息
oDrag.style.left = l + 'px';
oDrag.style.top = t + 'px';
}
3.实现点击按钮关闭输入框
//获取到关闭标签元素
var oClose = document.getElementById('ui_boxyClose');
//为这个元素绑定一个click事件
oClose.onclick = function () {
//当点击这个按钮时,把这个按钮的display设置为none
document.getElementById('loginPanel').style.display = 'none';
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。