明霞山资源网 Design By www.htccd.com
QQ面板拖拽,效果如图
JavaScript代码如下:
function getByClass(clsName, parent) {
var oParent = parent "login_logo_webqq", "loginPanel")[0];
//拖页
oTitle.onmousedown = fnDown;
//关闭页面
var close = document.getElementById("ui_boxyClose");
close.onclick = winClose;
//切换状态
var loginState = document.getElementById("loginState");
var stateList = document.getElementById("loginStatePanel");
var lis = stateList.getElementsByTagName("li");
var stateTxt = document.getElementById("login2qq_state_txt");
var loginStateShow = document.getElementById("loginStateShow");
//点击显示下拉单
loginState.onclick = function (e) {
stateList.style.display = "block";
//阻止事件冒泡;
e = event || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
};
//鼠标滑过,背景变色
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
this.style.backgroundColor = "#888";
};
lis[i].onmouseout = function () {
this.style.backgroundColor = "#fff";
};
//鼠标点击,txt改变,图标改变
lis[i].onclick = function (e) {
stateList.style.display = "none";
//阻止事件冒泡
e = event || window.event;
if(typeof e.stopPropagation){
e.stopPropagation();
}else {
e.cancelBubble = true;
}
var id = this.id;
loginStateShow.className = "login-state-show "+id;
var text = getByClass("stateSelect_text",id)[0].innerHTML;
stateTxt.innerHTML = text;
}
}
document.onclick = function () {
stateList.style.display = "none";
}
}
function winClose() {
var box = document.getElementById("loginPanel");
box.style.display = "none";
}
function fnDown(event) {
var event = event || window.event;
var oDrag = document.getElementById("loginPanel");
//光标按下时光标和面板之间的距离;
var disX = event.clientX - oDrag.offsetLeft;
var disY = event.clientY - oDrag.offsetTop;
//移动
document.onmousemove = function (event) {
event = event || window.event;
fnMove(event, disX, disY);
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
}
function fnMove(event, posX, posY) {
var oDrag = document.getElementById("loginPanel");
var l = event.clientX - posX;
var t = event.clientY - posY;
var winW = document.documentElement.clientWidth;
var winH = document.documentElement.clientHeight;
var maxW = winW - oDrag.offsetWidth - 10;
var maxH = winH - oDrag.offsetHeight;
//当l=0时,窗口不能继续外移
if (l < 0) {
l = 0;
} else if (l > maxW) {
l = maxW;
}
if (t < 10) {
t = 10;
} else if (t > maxH) {
t = maxH;
}
oDrag.style.left = l + "px";
oDrag.style.top = t + "px";
}
要点:
1.阻止事件冒泡
loginState.onclick点击事件冒泡,导致下拉列表无法点开
loginState.onclick = function () {
stateList.style.display = "block";
}
document.onclick = function () {
stateList.style.display = "none";
}
lis[i].onclick列表项的点击事件冒泡,导致下拉列表无法隐藏
lis[i].onclick = function () {
stateList.style.display = "none";
}
loginState.onclick = function () {
stateList.style.display = "block";
}
2.鼠标事件坐标获取
function fnDown(event) {
var event = event || window.event;
var oDrag = document.getElementById("loginPanel");
//光标按下时光标和面板之间的距离;
var disX = event.clientX - oDrag.offsetLeft;
var disY = event.clientY - oDrag.offsetTop;
//移动
document.onmousemove = function (event) {
event = event || window.event;
fnMove(event, disX, disY);
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
}
function fnMove(event, posX, posY) {
var oDrag = document.getElementById("loginPanel");
var l = event.clientX - posX;
var t = event.clientY - posY;
var winW = document.documentElement.clientWidth;
var winH = document.documentElement.clientHeight;
var maxW = winW - oDrag.offsetWidth - 10;
var maxH = winH - oDrag.offsetHeight;
//当l=0时,窗口不能继续外移
if (l < 0) {
l = 0;
} else if (l > maxW) {
l = maxW;
}
if (t < 10) {
t = 10;
} else if (t > maxH) {
t = maxH;
}
oDrag.style.left = l + "px";
oDrag.style.top = t + "px";
}
3.封装各浏览器通用的getElementsByClassName()方法
方法返回的是一个数组,切记
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;
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
明霞山资源网 Design By www.htccd.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
