摘要:項目需求及基本的和相信大家都用過登陸框,它可以在頁面中任意的拖拽,然后點擊狀態可以切換各種狀態。
前言:這是跟著慕課網一個老師的視頻做的,這幾天在重新的梳理自己,寫完這個例子要系統的學一下jQuery,我司現在用的還是比較多,畢竟用了它不用考慮IE兼容性,可以讓開發更有效率。
1.項目需求及基本的HTML和CSS相信大家都用過QQ登陸框,它可以在頁面中任意的拖拽,然后點擊狀態可以切換各種狀態。
首先做出HTML的結構
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://specialneedsforspecialkids.com/yun/112304.html
摘要:項目需求及基本的和相信大家都用過登陸框,它可以在頁面中任意的拖拽,然后點擊狀態可以切換各種狀態。 前言:這是跟著慕課網一個老師的視頻做的,這幾天在重新的梳理自己,寫完這個例子要系統的學一下jQuery,我司現在用的還是比較多,畢竟用了它不用考慮IE兼容性,可以讓開發更有效率。 1.項目需求及基本的HTML和CSS 相信大家都用過QQ登陸框,它可以在頁面中任意的拖拽,然后點擊狀態可以切...
摘要:項目需求及基本的和相信大家都用過登陸框,它可以在頁面中任意的拖拽,然后點擊狀態可以切換各種狀態。 前言:這是跟著慕課網一個老師的視頻做的,這幾天在重新的梳理自己,寫完這個例子要系統的學一下jQuery,我司現在用的還是比較多,畢竟用了它不用考慮IE兼容性,可以讓開發更有效率。 1.項目需求及基本的HTML和CSS 相信大家都用過QQ登陸框,它可以在頁面中任意的拖拽,然后點擊狀態可以切...
摘要:之前寫過一篇瀏覽器事件的相關操作和事件運行的原理瀏覽器事件解析。注意,頁面從瀏覽器緩存加載,并不會觸發事件。事件有一個屬性,返回一個布爾值。此外,不支持事件,可以使用事件代替。 之前寫過一篇瀏覽器事件的相關操作和事件運行的原理——JavaScript瀏覽器事件解析。這一篇主要寫一些常用的事件及一些可能的坑。 表單事件 鍵盤事件 當 , 的值發生變化時觸發。此外,打開 contente...
閱讀 3212·2023-04-25 18:43
閱讀 891·2021-11-24 09:39
閱讀 1361·2021-10-14 09:43
閱讀 3890·2021-09-22 15:58
閱讀 1899·2019-08-29 17:18
閱讀 409·2019-08-29 14:14
閱讀 3077·2019-08-29 13:01
閱讀 1614·2019-08-29 12:33