QQ拖拽及状态栏选择
HTML
1 2 3 4QQ练习 5 6 7 8 91060 6111 1213 14 151622 23帐 号：19密 码：2124 255926582757状态28下29在线30 56
CSS
1 .loginPanel { 2 width: 380px; 3 height: 247px; 4 left: 400px; 5 top: 120px; 6 position: absolute; 7 border: 1px solid #ccc; 8 background: #f6f6f6; 9 -moz-border-radius: 10px; 10 -webkit-border-radius: 10px; 11 border-radius: 10px; 12 -moz-box-shadow: 0 0 8px #000; 13 -webkit-box-shadow: 0 0 8px #000; 14 box-shadow: 0 0 8px #000; 15 } 16 17 18 .login_logo_webqq { 19 background: url('../images/login_window_logo.png') no-repeat -210px -0px; 20 margin-left: 100px; 21 margin-top: 10px; 22 width: 200px; 23 height: 44px; 24 cursor: move; 25 } 26 27 28 .inputs { 29 font: bold 15px arial; 30 margin-left: 80px; 31 margin-top: 30px; 32 } 33 34 .inputs .sign-input { 35 padding-bottom: 20px; 36 } 37 38 .inputs .sign-input input { 39 width: 170px; 40 border: 1px #ccc solid; 41 color: #868686; 42 font-size: 16px; 43 padding: 2px; 44 -moz-border-radius: 10px; 45 -webkit-border-radius: 10px; 46 -khtml-border-radius: 10px; 47 -border-radius: 10px; 48 outline: none; 49 } 50 51 .btn { 52 background: url("../images/login_btn.png") no-repeat -111px 0; 53 width: 111px; 54 height: 36px; 55 border: 0; 56 text-align: center; 57 line-height: 20px; 58 color: #0C4E7C; 59 cursor: pointer; 60 margin-left: 14px; 61 } 62 63 64 .login-state-trigger { 65 cursor: pointer; 66 display: block; 67 float: left; 68 height: 16px; 69 overflow: hidden; 70 width: 120px; 71 margin: 4px 0 0 0; 72 } 73 74 .login-state-trigger2 { 75 margin: 10px 0 0 20px; 76 } 77 78 .login-state-down { 79 background: url("../images/ptlogin.png") no-repeat scroll 0 -22px transparent; 80 float: left; 81 height: 6px; 82 margin-top: 5px; 83 overflow: hidden; 84 text-indent: -999em; 85 width: 7px; 86 } 87 88 .login-state-show { 89 float: left; 90 height: 14px; 91 overflow: hidden; 92 text-indent: -999em; 93 width: 14px; 94 margin: 1px 4px 0 0; 95 } 96 97 .login-state-txt { 98 float: left; 99 margin-left: 5px;100 font-size: 12px;101 >line-height:18px!important;102 }103 104 .login-state .callme {105 background: url("../images/ptlogin.png") -72px 0 no-repeat;106 }107 108 .login-state .online {109 background: url("../images/ptlogin.png") 0 0 no-repeat;110 }111 112 .login-state .away {113 background: url("../images/ptlogin.png") -18px 0 no-repeat;114 }115 116 .login-state .busy {117 background: url("../images/ptlogin.png") -36px 0 no-repeat;118 }119 120 .login-state .silent {121 background: url("../images/ptlogin.png") -108px 0 no-repeat;122 }123 124 .login-state .hidden {125 background: url("../images/ptlogin.png") -54px 0 no-repeat;126 }127 128 .statePanel {129 display: none;130 position: absolute;131 right: 68px;132 top: 193px;133 z-index: 10;134 margin: 0;135 border-width: 1px;136 border-style: solid;137 border-color: #ccc #6a6a6a #666 #cdcdcd;138 padding: 0;139 width: 100px;140 height: 133px;141 overflow: hidden;142 background: white;143 font-size: 12px;144 line-height: 1.5;145 }146 147 .statePanel .statePanel_li {148 display: block;149 float: left;150 margin: 0;151 padding: 3px 0;152 width: 100px;153 height: 16px;154 line-height: 16px;155 overflow: hidden;156 zoom: 1;157 cursor: pointer;158 }159 160 .stateSelect_icon {161 float: left;162 margin: 2px 0 0 5px;163 width: 14px;164 height: 14px;165 overflow: hidden;166 }167 168 .stateSelect_text {169 margin: 0 0 0 22px;170 }171 172 .bottomDiv {173 margin-left: 70px;174 }175 176 .ui_boxyClose{177 width:28px;178 height:28px;179 position:absolute;180 top:-10px;181 right:-10px;182 cursor:pointer;183 background:url('../images/boxy_btn.png') no-repeat;z-index:1}.184 185 ie6_0 .ui_boxyClose{186 background:0;187 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='boxy_btn.png',sizingMethod='scale')188 }
JavaScript
1 //封装一个getByClass函数，接收两个参数：第一个必需，第二个可选 2 function getByClass(className, parentId) { 3 var parent = parent ? document.getElementById(parentId) : document, 4 eles = new Array(), 5 elements = parent.getElementsByTagName("*"); 6 for(var i = 0, l = elements.length; i < l; i++) { 7 if(elements[i].className == className) { 8 eles.push(elements[i]); 9 } 10 } 11 return eles; //切记这个函数返回的是一个数组！！！ 12 }; 13 14 //在页面加载完毕之后调用drag函数 15 window.onload = drag; 16 17 //封装drag函数 18 function drag() { 19 //使用getByClass函数取得相应类名的某个元素； 20 //千万记得，这个函数返回的是一个数组，要想取得某个元素，一定要通过方括号访问 21 var title = getByClass("login_logo_webqq", "loginPanel")[0]; 22 //在鼠标在title区域按下时调用fnDown函数 23 title.onmousedown = fnDown; 24 //点击面板右上角按钮可关闭面板，实际上是将其隐藏 25 var close = document.getElementById("ui_boxyClose"); 26 close.onclick = function() { 27 //通过JS设置css属性值，其值必须是字符串 28 document.getElementById("loginPanel").style.display = "none"; 29 }; 30 //点击loginState区域将loginStatePanel显示出来 31 var loginState = document.getElementById("loginState"); 32 var loginStatePanel = document.getElementById("loginStatePanel"); 33 loginState.onclick = function(event) { 34 loginStatePanel.style.display = "block"; 35 //阻止冒泡 36 event = event || wind.event; 37 if(event.stopPropagation) { 38 event.stopPropagation(); 39 } else if(event.cancelBubble) { 40 event.cancelBubble = true; 41 }; 42 }; 43 //鼠标悬浮、离开和点击状态列表时 44 var list = loginStatePanel.getElementsByTagName("li"); 45 for(var i = 0, l = list.length; i < l; i++) { 46 //鼠标悬浮时，相应的元素改变背景颜色 47 list[i].onmouseover = function() { 48 this.style.backgroundColor = "#567"; 49 }; 50 //鼠标离开，恢复原来的颜色 51 list[i].onmouseout = function() { 52 this.style.backgroundColor = ""; 53 }; 54 //鼠标点击时，切换状态 55 list[i].onclick = function(event) { 56 //鼠标点击时，将loginStatePanel隐藏 57 loginStatePanel.style.display = "none"; 58 //无效！！！ 59 //点击某一个元素，将loginStatePanel隐藏； 60 //点击事件会冒泡，冒到祖先元素loginState，这个元素上已经绑定了一个点击事件，点击时将loginStatePanel显示出来； 61 //最终的结果就是loginStatePanel先被隐藏后又被显示，所以隐藏没有效果。 62 //阻止冒泡！！！ 63 event = event || wind.event; 64 if(event.stopPropagation) { 65 event.stopPropagation(); 66 } else if(event.cancelBubble) { 67 event.cancelBubble = true; 68 }; 69 //鼠标点击选择后，改变登录状态 70 //改变显示的文字 71 var state_txt = document.getElementById("login2qq_state_txt"); 72 var id = this.id; 73 state_txt.innerHTML = getByClass("stateSelect_text", id)[0].innerHTML; 74 //改变显示的图标 75 var loginStateShow = document.getElementById('loginStateShow'); 76 loginStateShow.className = ""; 77 loginStateShow.className = "login-state-show " + id; 78 } 79 }; 80 //在页面的任何位置点击，隐藏loginStatePanel 81 //如果单纯地添加这个事件，loginStatePanel将无法显示出来 82 //原因在于：前面在loginState区域点击的时候，显示loginStatePanel； 83 //冒泡到document上，又被隐藏了 84 //所以需要在前面的事件上阻止冒泡 85 document.onclick = function() { 86 var loginStatePanel = document.getElementById("loginStatePanel"); 87 loginStatePanel.style.display = "none"; 88 }; 89 }; 90 91 //封装fnDown函数 92 function fnDown(event) { 93 event = event || window.event; 94 var panel = document.getElementById("loginPanel"); 95 //在鼠标按下的那一刻，取得鼠标点击的那个点距离面板左上角的水平和垂直距离 96 var disX = event.clientX - panel.offsetLeft; 97 var disY = event.clientY - panel.offsetTop; 98 //鼠标在页面中移动，持续触发document.onmousemove事件，核心思想是：鼠标到哪儿，面板到哪儿 99 document.onmousemove = function(event) {100 event = event || window.event;101 //调用fnMove函数102 fnMove(event, disX, disY);103 };104 //鼠标在页面中任何地方松开，都可以取消跟随效果；所以onmouseup应该挂载在document上，而不是title105 document.onmouseup = function() {106 document.onmousemove = null;107 document.onmouseup = null;108 }109 }110 111 //封装fnMove函数112 function fnMove(event, posX, posY) {113 event = event || window.event;114 //在一个新的函数作用域中，需要重新取得所需要的元素115 var panel = document.getElementById("loginPanel");116 //计算面板左上角距离页面左上角的动态距离117 var l = event.clientX - posX;118 var t = event.clientY - posY;119 //计算面板能够移动的最大最小距离，防止移动到页面之外，出现滚动条120 var window_width = document.documentElement.clientWidth || document.body.clientWidth;121 var window_height = document.documentElement.clientHeight || document.body.clientHeight;122 var max_width = window_width - panel.offsetWidth - 10;123 var max_height = window_height - panel.offsetHeight;124 //控制面板移动的最大最小距离125 if(l < 0) {126 l = 0;127 } else if (l > max_width) {128 l = max_width;129 };130 if(t < 0) {131 t = 0;132 } else if (t > max_height) {133 t = max_height;134 };135 //最后的设置，让面板左上角距离页面左上角的距离随着鼠标的移动动态调整，达到拖拽效果136 //切记，要带单位！137 panel.style.left = l + "px";138 panel.style.top = t + "px";139 };
此demo有瑕疵！
通过alert()检测，id会随着点击不同的状态栏而相应变化，但是getByClass("stateSelect_text", id)[0].innerHTML永远都是“我在线上”，原因未知！
抽奖
HTML
1 2 3 4抽奖 5 6 7 8 9 10开始抽奖啦！1112 开 始13 停 止1415 16
CSS
1 * { 2 margin:0; 3 padding:0; 4 } 5 6 .title { 7 width:400px; 8 height:70px; 9 margin:0 auto;10 padding-top:30px;11 text-align:center;12 font-size:24px;13 font-weight:bold;14 color:#F00;15 }16 17 .btns {18 width:190px;19 height:30px;20 margin:0 auto;}21 22 .btns span {23 display:block; 24 float:left;25 width:80px;26 height:27px;27 line-height:27px;28 background:#036;29 border:1px solid #eee;30 border-radius:7px;31 margin-right:10px;32 color:#FFF;33 text-align:center;34 font-size:14px;35 font-family:"微软雅黑";36 cursor:pointer;37 }
JavaScript
1 //抽奖效果的核心思想：创建一个数组，随机取得数组中的某个元素。 2 //创建一个数组备用 3 var data = ["iPhone", "iPad", "iPad Mini", "iPod", "Thank you", "Thank you","Thank you", "Thank you"]; 4 var timer = null; 5 var flag = 0; 6 7 window.onload = lottery; 8 9 function lottery() {10 var start = document.getElementById("start");11 var stop = document.getElementById("stop");12 //鼠标事件13 start.onclick = playStart;14 stop.onclick = playStop;15 //键盘事件16 document.onkeyup = function(event) {17 event = event || window.event;18 //检测是否按了回车键19 if(event.keyCode === 13) {20 //如果flag为0，则表示没有按过回车键，开始抽奖，然后将flag赋值为121 //为了达到鼠标与键盘的完美配合效果，将flag赋值分别写在playStart和playStop函数里22 if(flag === 0) {23 playStart();24 //flag = 1;25 } else if(flag ===1) {26 //如果flag为1，则表示正在抽奖，停止抽奖，将flag重置为0，以便开始下次抽奖27 playStop();28 //flag = 0;29 }30 };31 };32 };33 34 //封装playStart函数35 function playStart() {36 var title = document.getElementById("title");37 //每次点击只执行一个定时器，关掉之前的定时器38 clearInterval(timer);39 //生成新的定时器40 timer = setInterval(function() {41 //每隔一段时间生成一个随机数，所以变量random必须写在setInterval内部42 var random = Math.floor(Math.random() * 8);43 title.innerHTML = data[random];44 }, 50);45 //改变按钮的背景颜色46 var start = document.getElementById("start");47 start.style.backgroundColor = "#999";48 flag = 1;49 };50 //封装playStop函数51 function playStop() {52 //清除定时器53 clearInterval(timer);54 //恢复"开始"按钮的颜色55 var start = document.getElementById("start");56 start.style.backgroundColor = "#036";57 flag = 0;58 };
下拉菜单
HTML
1 2 3 4 5下拉菜单 6 7 8 910 请选择分类1119 20 2112
18- ASP开发
13- .NET开发
14- PHP开发
15- Javascript开发
16- Java特效
17
CSS
1 body,ul,li { 2 margin:0; 3 padding:0; 4 font-size:13px; 5 } 6 7 ul,li { 8 list-style:none; 9 }10 11 #divselect {12 width:186px;13 margin:80px auto; 14 position:relative; 15 z-index:10000;16 }17 18 #divselect cite {19 width:150px; 20 height:24px;21 line-height:24px; 22 display:block; 23 color:#807a62; 24 cursor:pointer;25 font-style:normal;26 padding-left:4px; 27 padding-right:30px; 28 border:1px solid #333333; 29 background:url(xjt.png) no-repeat right center;30 }31 32 #divselect ul {33 width:184px;34 border:1px solid #333333;35 background-color:#ffffff; 36 position:absolute; 37 z-index:20000; 38 margin-top:-1px; 39 display:none;40 }41 42 #divselect ul li {43 height:24px; 44 line-height:24px;45 }46 47 #divselect ul li a {48 display:block; 49 height:24px; 50 color:#333333; 51 text-decoration:none; 52 padding-left:10px; 53 padding-right:10px;54 }
JavaScript
1 window.onload = draw; 2 3 function draw() { 4 var select = document.getElementById("divselect"); 5 select.onclick = drawDown; 6 document.onclick = function() { 7 //关闭下拉菜单 8 var ulist = document.getElementsByTagName("ul")[0]; 9 ulist.style.display = "none";10 //清除背景颜色11 var list = ulist.getElementsByTagName("a");12 for(var i = 0, l = list.length; i < l; i++) {13 list[i].style.backgroundColor = "";14 }15 };16 };17 18 function drawDown(event) {19 var ulist = document.getElementsByTagName("ul")[0];20 ulist.style.display = "block";21 event = event || window.event;22 if(event.stopPropagation) {23 event.stopPropagation();24 } else if(event.cancelBubble) {25 event.cancelBubble = true;26 }27 var list = ulist.getElementsByTagName("a");28 29 //鼠标事件30 for(var i = 0, l = list.length; i < l; i++) {31 list[i].onmouseover = function() {32 //清除所有键盘事件导致的背景颜色33 for(var i = 0, l = list.length; i < l; i++) {34 list[i].style.backgroundColor = "";35 }36 this.style.backgroundColor = "#567";37 };38 list[i].onmouseout = function() {39 this.style.backgroundColor = "";40 };41 list[i].onclick = function(event) {42 var cite = document.getElementsByTagName("cite")[0];43 cite.innerHTML = this.innerHTML;44 ulist.style.display = "none";45 event = event || window.event;46 if(event.stopPropagation) {47 event.stopPropagation();48 } else if(event.cancelBubble) {49 event.cancelBubble = true;50 }51 };52 };53 54 //键盘事件55 //声明并初始化一个变量index，赋值为-156 var index = -1;57 document.onkeyup = function(event) {58 event = event || window.event;59 //清除所有鼠标事件导致的背景颜色60 for(var i = 0, l = list.length; i < l; i++) {61 list[i].style.backgroundColor = "";62 }63 //如果按下的是向下方向键64 if(event.keyCode === 40) {65 //每按键一次，index递增66 index++;67 //控制index的大小范围68 //如果index大于等于数组的长度，则将其重置为0，这时候就会选中数组的第一项，此时应该恢复数组最后一项的背景颜色69 if(index >= l) {70 index = 0;71 list[l-1].style.backgroundColor = "";72 }73 //第一次按向上方向键时，index从-1变成0，以index为索引号，改变键盘选中的每一项的背景颜色74 list[index].style.backgroundColor = "#567";75 //恢复上一项的背景颜色76 list[index-1].style.backgroundColor = "";77 }78 //如果按下的是向上方向键，逻辑同上79 if(event.keyCode ===38) {80 index--;81 if(index < 0) {82 index = l -1;83 list[0].style.backgroundColor = "";84 }85 list[index].style.backgroundColor = "#567";86 list[index+1].style.backgroundColor = "";87 }88 //如果按下的是回车键89 if(event.keyCode === 13) {90 var cite = document.getElementsByTagName("cite")[0];91 cite.innerHTML = list[index].innerHTML;92 ulist.style.display = "none";93 };94 }95 };