摘要:项目需求及基本的和相信大家都用过登陆框,它可以在页面中任意的拖拽,然后点击状态可以切换各种状态。
前言:这是跟着慕课网一个老师的视频做的,这几天在重新的梳理自己,写完这个例子要系统的学一下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"; }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112304.html
摘要:项目需求及基本的和相信大家都用过登陆框,它可以在页面中任意的拖拽,然后点击状态可以切换各种状态。 前言:这是跟着慕课网一个老师的视频做的,这几天在重新的梳理自己,写完这个例子要系统的学一下jQuery,我司现在用的还是比较多,毕竟用了它不用考虑IE兼容性,可以让开发更有效率。 1.项目需求及基本的HTML和CSS 相信大家都用过QQ登陆框,它可以在页面中任意的拖拽,然后点击状态可以切...
摘要:项目需求及基本的和相信大家都用过登陆框,它可以在页面中任意的拖拽,然后点击状态可以切换各种状态。 前言:这是跟着慕课网一个老师的视频做的,这几天在重新的梳理自己,写完这个例子要系统的学一下jQuery,我司现在用的还是比较多,毕竟用了它不用考虑IE兼容性,可以让开发更有效率。 1.项目需求及基本的HTML和CSS 相信大家都用过QQ登陆框,它可以在页面中任意的拖拽,然后点击状态可以切...
摘要:之前写过一篇浏览器事件的相关操作和事件运行的原理浏览器事件解析。注意,页面从浏览器缓存加载,并不会触发事件。事件有一个属性,返回一个布尔值。此外,不支持事件,可以使用事件代替。 之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件及一些可能的坑。 表单事件 键盘事件 当 , 的值发生变化时触发。此外,打开 contente...
阅读 3211·2023-04-25 18:43
阅读 889·2021-11-24 09:39
阅读 1360·2021-10-14 09:43
阅读 3889·2021-09-22 15:58
阅读 1896·2019-08-29 17:18
阅读 407·2019-08-29 14:14
阅读 3076·2019-08-29 13:01
阅读 1612·2019-08-29 12:33