QQ拖拽及状态栏选择
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>QQ练习</title>
<link href="css/main.css" rel="stylesheet" />
<script src="js/drag.js"></script>
</head>
<body>
<div class="loginPanel" id="loginPanel">
<div style="position: relative; z-index: 1;">
<div class="ui_boxyClose" id="ui_boxyClose"></div>
</div>
<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>
</body>
</html>
CSS
.loginPanel {
width: 380px;
height: 247px;
left: 400px;
top: 120px;
position: absolute;
border: 1px solid #ccc;
background: #f6f6f6;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 8px #000;
-webkit-box-shadow: 0 0 8px #000;
box-shadow: 0 0 8px #000;
}
.login_logo_webqq {
background: url('../images/login_window_logo.png') no-repeat -210px -0px;
margin-left: 100px;
margin-top: 10px;
width: 200px;
height: 44px;
cursor: move;
}
.inputs {
font: bold 15px arial;
margin-left: 80px;
margin-top: 30px;
}
.inputs .sign-input {
padding-bottom: 20px;
}
.inputs .sign-input input {
width: 170px;
border: 1px #ccc solid;
color: #868686;
font-size: 16px;
padding: 2px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-border-radius: 10px;
outline: none;
}
.btn {
background: url("../images/login_btn.png") no-repeat -111px 0;
width: 111px;
height: 36px;
border:;
text-align: center;
line-height: 20px;
color: #0C4E7C;
cursor: pointer;
margin-left: 14px;
}
.login-state-trigger {
cursor: pointer;
display: block;
float: left;
height: 16px;
overflow: hidden;
width: 120px;
margin: 4px 0 0 0;
}
.login-state-trigger2 {
margin: 10px 0 0 20px;
}
.login-state-down {
background: url("../images/ptlogin.png") no-repeat scroll 0 -22px transparent;
float: left;
height: 6px;
margin-top: 5px;
overflow: hidden;
text-indent: -999em;
width: 7px;
}
.login-state-show {
float: left;
height: 14px;
overflow: hidden;
text-indent: -999em;
width: 14px;
margin: 1px 4px 0 0;
}
.login-state-txt {
float: left;
margin-left: 5px;
font-size: 12px;
>line-height:18px!important;
}
.login-state .callme {
background: url("../images/ptlogin.png") -72px 0 no-repeat;
}
.login-state .online {
background: url("../images/ptlogin.png") 0 0 no-repeat;
}
.login-state .away {
background: url("../images/ptlogin.png") -18px 0 no-repeat;
}
.login-state .busy {
background: url("../images/ptlogin.png") -36px 0 no-repeat;
}
.login-state .silent {
background: url("../images/ptlogin.png") -108px 0 no-repeat;
}
.login-state .hidden {
background: url("../images/ptlogin.png") -54px 0 no-repeat;
}
.statePanel {
display: none;
position: absolute;
right: 68px;
top: 193px;
z-index:;
margin:;
border-width: 1px;
border-style: solid;
border-color: #ccc #6a6a6a #666 #cdcdcd;
padding:;
width: 100px;
height: 133px;
overflow: hidden;
background: white;
font-size: 12px;
line-height: 1.5;
}
.statePanel .statePanel_li {
display: block;
float: left;
margin:;
padding: 3px 0;
width: 100px;
height: 16px;
line-height: 16px;
overflow: hidden;
zoom:;
cursor: pointer;
}
.stateSelect_icon {
float: left;
margin: 2px 0 0 5px;
width: 14px;
height: 14px;
overflow: hidden;
}
.stateSelect_text {
margin: 0 0 0 22px;
}
.bottomDiv {
margin-left: 70px;
}
.ui_boxyClose{
width:28px;
height:28px;
position:absolute;
top:-10px;
right:-10px;
cursor:pointer;
background:url('../images/boxy_btn.png') no-repeat;z-index:}.
ie6_0 .ui_boxyClose{
background:;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='boxy_btn.png',sizingMethod='scale')
}
JavaScript
//封装一个getByClass函数，接收两个参数：第一个必需，第二个可选
function getByClass(className, parentId) {
var parent = parent ? document.getElementById(parentId) : document,
eles = new Array(),
elements = parent.getElementsByTagName("*");
for(var i = 0, l = elements.length; i < l; i++) {
if(elements[i].className == className) {
eles.push(elements[i]);
}
}
return eles; //切记这个函数返回的是一个数组！！！
}; //在页面加载完毕之后调用drag函数
window.onload = drag; //封装drag函数
function drag() {
//使用getByClass函数取得相应类名的某个元素；
//千万记得，这个函数返回的是一个数组，要想取得某个元素，一定要通过方括号访问
var title = getByClass("login_logo_webqq", "loginPanel")[0];
//在鼠标在title区域按下时调用fnDown函数
title.onmousedown = fnDown;
//点击面板右上角按钮可关闭面板，实际上是将其隐藏
var close = document.getElementById("ui_boxyClose");
close.onclick = function() {
//通过JS设置css属性值，其值必须是字符串
document.getElementById("loginPanel").style.display = "none";
};
//点击loginState区域将loginStatePanel显示出来
var loginState = document.getElementById("loginState");
var loginStatePanel = document.getElementById("loginStatePanel");
loginState.onclick = function(event) {
loginStatePanel.style.display = "block";
//阻止冒泡
event = event || wind.event;
if(event.stopPropagation) {
event.stopPropagation();
} else if(event.cancelBubble) {
event.cancelBubble = true;
};
};
//鼠标悬浮、离开和点击状态列表时
var list = loginStatePanel.getElementsByTagName("li");
for(var i = 0, l = list.length; i < l; i++) {
//鼠标悬浮时，相应的元素改变背景颜色
list[i].onmouseover = function() {
this.style.backgroundColor = "#567";
};
//鼠标离开，恢复原来的颜色
list[i].onmouseout = function() {
this.style.backgroundColor = "";
};
//鼠标点击时，切换状态
list[i].onclick = function(event) {
//鼠标点击时，将loginStatePanel隐藏
loginStatePanel.style.display = "none";
//无效！！！
//点击某一个元素，将loginStatePanel隐藏；
//点击事件会冒泡，冒到祖先元素loginState，这个元素上已经绑定了一个点击事件，点击时将loginStatePanel显示出来；
//最终的结果就是loginStatePanel先被隐藏后又被显示，所以隐藏没有效果。
//阻止冒泡！！！
event = event || wind.event;
if(event.stopPropagation) {
event.stopPropagation();
} else if(event.cancelBubble) {
event.cancelBubble = true;
};
//鼠标点击选择后，改变登录状态
//改变显示的文字
var state_txt = document.getElementById("login2qq_state_txt");
var id = this.id;
state_txt.innerHTML = getByClass("stateSelect_text", id)[0].innerHTML;
//改变显示的图标
var loginStateShow = document.getElementById('loginStateShow');
loginStateShow.className = "";
loginStateShow.className = "login-state-show " + id;
}
};
//在页面的任何位置点击，隐藏loginStatePanel
//如果单纯地添加这个事件，loginStatePanel将无法显示出来
//原因在于：前面在loginState区域点击的时候，显示loginStatePanel；
//冒泡到document上，又被隐藏了
//所以需要在前面的事件上阻止冒泡
document.onclick = function() {
var loginStatePanel = document.getElementById("loginStatePanel");
loginStatePanel.style.display = "none";
};
}; //封装fnDown函数
function fnDown(event) {
event = event || window.event;
var panel = document.getElementById("loginPanel");
//在鼠标按下的那一刻，取得鼠标点击的那个点距离面板左上角的水平和垂直距离
var disX = event.clientX - panel.offsetLeft;
var disY = event.clientY - panel.offsetTop;
//鼠标在页面中移动，持续触发document.onmousemove事件，核心思想是：鼠标到哪儿，面板到哪儿
document.onmousemove = function(event) {
event = event || window.event;
//调用fnMove函数
fnMove(event, disX, disY);
};
//鼠标在页面中任何地方松开，都可以取消跟随效果；所以onmouseup应该挂载在document上，而不是title
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
} //封装fnMove函数
function fnMove(event, posX, posY) {
event = event || window.event;
//在一个新的函数作用域中，需要重新取得所需要的元素
var panel = document.getElementById("loginPanel");
//计算面板左上角距离页面左上角的动态距离
var l = event.clientX - posX;
var t = event.clientY - posY;
//计算面板能够移动的最大最小距离，防止移动到页面之外，出现滚动条
var window_width = document.documentElement.clientWidth || document.body.clientWidth;
var window_height = document.documentElement.clientHeight || document.body.clientHeight;
var max_width = window_width - panel.offsetWidth - 10;
var max_height = window_height - panel.offsetHeight;
//控制面板移动的最大最小距离
if(l < 0) {
l = 0;
} else if (l > max_width) {
l = max_width;
};
if(t < 0) {
t = 0;
} else if (t > max_height) {
t = max_height;
};
//最后的设置，让面板左上角距离页面左上角的距离随着鼠标的移动动态调整，达到拖拽效果
//切记，要带单位！
panel.style.left = l + "px";
panel.style.top = t + "px";
};
此demo有瑕疵！
通过alert()检测，id会随着点击不同的状态栏而相应变化，但是getByClass("stateSelect_text", id)[0].innerHTML永远都是“我在线上”，原因未知！
抽奖
HTML
<!doctype html>
<html>
<head>
<title>抽奖</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="title" class="title">开始抽奖啦！</div>
<div class="btns">
<span id="start">开 始</span>
<span id="stop">停 止</span>
</div>
</body>
</html>
CSS
* {
margin:;
padding:;
}
.title {
width:400px;
height:70px;
margin:0 auto;
padding-top:30px;
text-align:center;
font-size:24px;
font-weight:bold;
color:#F00;
}
.btns {
width:190px;
height:30px;
margin:0 auto;}
.btns span {
display:block;
float:left;
width:80px;
height:27px;
line-height:27px;
background:#036;
border:1px solid #eee;
border-radius:7px;
margin-right:10px;
color:#FFF;
text-align:center;
font-size:14px;
font-family:"微软雅黑";
cursor:pointer;
}
JavaScript
//抽奖效果的核心思想：创建一个数组，随机取得数组中的某个元素。
//创建一个数组备用
var data = ["iPhone", "iPad", "iPad Mini", "iPod", "Thank you", "Thank you","Thank you", "Thank you"];
var timer = null;
var flag = 0; window.onload = lottery; function lottery() {
var start = document.getElementById("start");
var stop = document.getElementById("stop");
//鼠标事件
start.onclick = playStart;
stop.onclick = playStop;
//键盘事件
document.onkeyup = function(event) {
event = event || window.event;
//检测是否按了回车键
if(event.keyCode === 13) {
//如果flag为0，则表示没有按过回车键，开始抽奖，然后将flag赋值为1
//为了达到鼠标与键盘的完美配合效果，将flag赋值分别写在playStart和playStop函数里
if(flag === 0) {
playStart();
//flag = 1;
} else if(flag ===1) {
//如果flag为1，则表示正在抽奖，停止抽奖，将flag重置为0，以便开始下次抽奖
playStop();
//flag = 0;
}
};
};
}; //封装playStart函数
function playStart() {
var title = document.getElementById("title");
//每次点击只执行一个定时器，关掉之前的定时器
clearInterval(timer);
//生成新的定时器
timer = setInterval(function() {
//每隔一段时间生成一个随机数，所以变量random必须写在setInterval内部
var random = Math.floor(Math.random() * 8);
title.innerHTML = data[random];
}, 50);
//改变按钮的背景颜色
var start = document.getElementById("start");
start.style.backgroundColor = "#999";
flag = 1;
};
//封装playStop函数
function playStop() {
//清除定时器
clearInterval(timer);
//恢复"开始"按钮的颜色
var start = document.getElementById("start");
start.style.backgroundColor = "#036";
flag = 0;
};
下拉菜单
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="divselect">
<cite>请选择分类</cite>
<ul>
<li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li>
<li><a href="javascript:;" selectid="2">.NET开发</a></li>
<li><a href="javascript:;" selectid="3">PHP开发</a></li>
<li><a href="javascript:;" selectid="4">Javascript开发</a></li>
<li><a href="javascript:;" selectid="5">Java特效</a></li>
</ul>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
CSS
body,ul,li {
margin:;
padding:;
font-size:13px;
}
ul,li {
list-style:none;
}
#divselect {
width:186px;
margin:80px auto;
position:relative;
z-index:;
}
#divselect cite {
width:150px;
height:24px;
line-height:24px;
display:block;
color:#807a62;
cursor:pointer;
font-style:normal;
padding-left:4px;
padding-right:30px;
border:1px solid #333333;
background:url(xjt.png) no-repeat right center;
}
#divselect ul {
width:184px;
border:1px solid #333333;
background-color:#ffffff;
position:absolute;
z-index:;
margin-top:-1px;
display:none;
}
#divselect ul li {
height:24px;
line-height:24px;
}
#divselect ul li a {
display:block;
height:24px;
color:#333333;
text-decoration:none;
padding-left:10px;
padding-right:10px;
}
JavaScript
window.onload = draw;
function draw() {
var select = document.getElementById("divselect");
select.onclick = drawDown;
document.onclick = function() {
//关闭下拉菜单
var ulist = document.getElementsByTagName("ul")[0];
ulist.style.display = "none";
//清除背景颜色
var list = ulist.getElementsByTagName("a");
for(var i = 0, l = list.length; i < l; i++) {
list[i].style.backgroundColor = "";
}
};
};
function drawDown(event) {
var ulist = document.getElementsByTagName("ul")[0];
ulist.style.display = "block";
event = event || window.event;
if(event.stopPropagation) {
event.stopPropagation();
} else if(event.cancelBubble) {
event.cancelBubble = true;
}
var list = ulist.getElementsByTagName("a");
//鼠标事件
for(var i = 0, l = list.length; i < l; i++) {
list[i].onmouseover = function() {
//清除所有键盘事件导致的背景颜色
for(var i = 0, l = list.length; i < l; i++) {
list[i].style.backgroundColor = "";
}
this.style.backgroundColor = "#567";
};
list[i].onmouseout = function() {
this.style.backgroundColor = "";
};
list[i].onclick = function(event) {
var cite = document.getElementsByTagName("cite")[0];
cite.innerHTML = this.innerHTML;
ulist.style.display = "none";
event = event || window.event;
if(event.stopPropagation) {
event.stopPropagation();
} else if(event.cancelBubble) {
event.cancelBubble = true;
}
};
};
//键盘事件
//声明并初始化一个变量index，赋值为-1
var index = -1;
document.onkeyup = function(event) {
event = event || window.event;
//清除所有鼠标事件导致的背景颜色
for(var i = 0, l = list.length; i < l; i++) {
list[i].style.backgroundColor = "";
}
//如果按下的是向下方向键
if(event.keyCode === 40) {
//每按键一次，index递增
index++;
//控制index的大小范围
//如果index大于等于数组的长度，则将其重置为0，这时候就会选中数组的第一项，此时应该恢复数组最后一项的背景颜色
if(index >= l) {
index = 0;
list[l-1].style.backgroundColor = "";
}
//第一次按向上方向键时，index从-1变成0，以index为索引号，改变键盘选中的每一项的背景颜色
list[index].style.backgroundColor = "#567";
//恢复上一项的背景颜色
list[index-1].style.backgroundColor = "";
}
//如果按下的是向上方向键，逻辑同上
if(event.keyCode ===38) {
index--;
if(index < 0) {
index = l -1;
list[0].style.backgroundColor = "";
}
list[index].style.backgroundColor = "#567";
list[index+1].style.backgroundColor = "";
}
//如果按下的是回车键
if(event.keyCode === 13) {
var cite = document.getElementsByTagName("cite")[0];
cite.innerHTML = list[index].innerHTML;
ulist.style.display = "none";
};
}
};