QQ面板状态切换效果

首页课程实战体系课手记专栏慕课教程

QQ面板状态切换效果

html

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</div>

<div>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

</body>

</html>

-----------------------------------------------分割线---------------------------------------------

整个js：

window.onload=drag;

function drag(){//实现拖拽的函数

var title=document.getElementsByClassName("loginPanel")[0];//取出框的元素

title.onmousedown=follow;

//松开不跟随

document.onmouseup=function(){

document.onmousemove=null;document.onmousemup=null;

}

//关闭

oClose=document.getElementById("ui_boxyClose");

oClose.onclick=function(){

loginPanel.style.display="none";

}

//切换状态

var loginState=document.getElementById("loginState"),

loginStatePanel=document.getElementById("loginStatePanel"),

state=document.getElementsByClassName("statePanel_li");

loginState.onclick=function(){

loginStatePanel.style.display="block";

}

-------------------------------------提示线---------------------------这里是问题重点-----------------------

//鼠标滑过后有阴影 /*这里不报错，但是也不能实现鼠标滑过列表时有阴影！！！！！*/

for (var i = 0; i < state.length; i++) {

state[i].onmouseover=function(){

this.style.backgroud="#567";}

state[i].onmouseout=function(){

this.style.backgroud="#FFF";}

}

----------------------------提示线-----------------问题代码结束--------------------------------------------------------

}

//让鼠标按下后可以拖动

function follow(event){

var loginPanel=document.getElementsByClassName("loginPanel")[0];

//获取边框和鼠标按下位置的差

var l=event.clientX-loginPanel.offsetLeft,

t=event.clientY-loginPanel.offsetTop,

MaxW=document.documentElement.clientWidth-loginPanel.offsetWidth+10,

MaxH=document.documentElement.clientHeight-loginPanel.offsetHeight;

//使box跟随鼠标移动

document.onmousemove=function(event){

pox=event.clientX-l;

poy=event.clientY-t;

//限制移动范围

if(pox<0){

pox=0;}else if(pox>MaxW){

pox=MaxW}

if(poy<0){

poy=10;}else if(poy>MaxH){

poy=MaxH}

//j将求出的值赋给box

loginPanel.style.left=pox+"px";

loginPanel.style.top=poy+"px";

}

慕粉3900206

浏览 1232回答 1

1回答

stone310

background写错了。。改一下看下是否能运行

0 0

随时随地看视频慕课网APP

QQ面板状态切换 效果

1回答

QQ面板状态切换效果