当前位置：首页 -> 网页设计 -> 网页特效 -> Javascript制作浮动的工具条

Javascript制作浮动的工具条

时间： 2021-07-31 作者：daque

　该步调是我从旁人的网站上领会出来的！因为对方的网站运用了框架，并且又废除了鼠目标右键功效，所以费了好长功夫！当你欣赏该页时，东西条一直浮在左上角，你若不爱好，不妨本人安排摆放场所！若想多页运用该代码，不妨把jsp步调局部写成js的文献，而后再经过挪用来实行，有不领会的场合，欢送诸位与我交谈！

<html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf8"> <style type="text/css"> .wdblack{ font-size:9pt; line-height:11pt; font-family:宋体; color:black } .wdgray{ font-size:9pt; line-height:11pt; font-family:宋体; color:#cccccc } .wdblue{ font-size:9pt; line-height:11pt; font-family:宋体; color:#2f8bdf } .wdred{ font-size:9pt; line-height:11pt; font-family:宋体; color:red } .wdwhite{ font-size:9pt; line-height:11pt; font-family:宋体; color:white } .moveme{cursor: move;} .handle{cursor: move;} .coolbar{background: #fffffc;border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-bottom: 1px solid buttonshadow; border-right: 1px solid buttonshadow; padding: 2px; font: menu;} .coolbutton{font-size:9pt;border: 1px solid buttonface; padding: 1px; text-align: center; cursor: hand;color:#555555} .coolbutton img {filter: gray();} div{ font-size:9pt; line-height:11pt; font-family:宋体; color:black } text{ font-size:9pt; line-height:11pt; font-family:宋体; color:black } input{ font-size:9pt; line-height:11pt; font-family:宋体; color:black } table{ font-size:9pt; line-height:11pt; font-family:宋体; color:black } body{ font-size:9pt; line-height:11pt; font-family:宋体; color:black } form{ font-size:9pt; line-height:11pt; font-family:宋体; color:black } a:link{ font-size:9pt; font-family:宋体; text-decoration: none; color:#2f8bdf } a:visited{ font-size:9pt; font-family:宋体; text-decoration: none; color:#2f8bdf } a:hover{ font-size:9pt; font-family:宋体; text-decoration: underline; color:#ff0000 } </style> <script language="javascript"> var dragobject = null; var tx; var ty; document.onmouseover = doover; document.onmouseout = doout; document.onmousedown = dodown; document.onmouseup = doup; document.onmousedown=initdown; document.onmouseup=initup; document.onmousemove=initmove; function stat(){ var a = pageyoffset; document.bar.top = a; settimeout('stat()',2); } function fix(){ nome=navigator.appname if(nome=='netscape') stat(); else{ var a=document.body.scrolltop; var b=document.body.scrollleft; bar.style.top = a; bar.style.left = b; } } function getreal(el) { temp = el; while ((temp != null) && (temp.tagname != "body")) { if ((temp.classname == "moveme") || (temp.classname == "handle")){ el = temp; return el; } temp = temp.parentelement; } return el; } function moveme_onmousedown() { el = getreal(window.event.srcelement) if (el.classname == "moveme") { dragobject = el; ty = (window.event.clienty - dragobject.style.pixeltop); tx = (window.event.clientx - dragobject.style.pixelleft); window.event.returnvalue = false; window.event.cancelbubble = true; }else if (el.classname == "handle") { tmp = el.getattribute("for"); if (tmp != null) { el = eval(tmp); dragobject = el; ty = (window.event.clienty - dragobject.style.pixeltop); tx = (window.event.clientx - dragobject.style.pixelleft); window.event.returnvalue = false; window.event.cancelbubble = true; } else { dragobject = null; } }else { dragobject = null; } } function moveme_onmouseup() { if(dragobject) { dragobject = null; } } function moveme_onmousemove() { if (dragobject) { if(window.event.clientx >= 0) { dragobject.style.left = window.event.clientx - tx; dragobject.style.top = window.event.clienty - ty; } window.event.returnvalue = false; window.event.cancelbubble = true; } } if (document.all) { document.onmousedown = moveme_onmousedown; document.onmouseup = moveme_onmouseup; document.onmousemove = moveme_onmousemove; } function doover() { var toel = getreal(window.event.toelement, "classname", "coolbutton"); var fromel = getreal(window.event.fromelement, "classname", "coolbutton"); if (toel == fromel) return; var el = toel; var cdisabled = el.cdisabled; cdisabled = (cdisabled != null); if (el.classname == "coolbutton") el.onselectstart = new function("return false"); if ((el.classname == "coolbutton") && !cdisabled) { makeraised(el); makegray(el,false); } } function doout() { var toel = getreal(window.event.toelement, "classname", "coolbutton"); var fromel = getreal(window.event.fromelement, "classname", "coolbutton"); if (toel == fromel) return; var el = fromel; var cdisabled = el.cdisabled; cdisabled = (cdisabled != null); var ctoggle = el.ctoggle; toggle_disabled = (ctoggle != null); if (ctoggle && el.value) { makepressed(el); makegray(el,true); } else if ((el.classname == "coolbutton") && !cdisabled) { makeflat(el); makegray(el,true); } } function dodown() { el = getreal(window.event.srcelement, "classname", "coolbutton"); var cdisabled = el.cdisabled; cdisabled = (cdisabled != null); if ((el.classname == "coolbutton") && !cdisabled) { makepressed(el) } } function doup() { el = getreal(window.event.srcelement, "classname", "coolbutton"); var cdisabled = el.cdisabled; cdisabled = (cdisabled != null); if ((el.classname == "coolbutton") && !cdisabled) { makeraised(el); } } function getreal(el, type, value) { temp = el; while ((temp != null) && (temp.tagname != "body")) { if (eval("temp." + type) == value) { el = temp; return el; } temp = temp.parentelement; } return el; } function findchildren(el, type, value) { var children = el.children; var tmp = new array(); var j=0; for (var i=0; i<children.length; i++) { if (eval("children[i]." + type + "=="" + value + """)) { tmp[tmp.length] = children[i]; } tmp = tmp.concat(findchildren(children[i], type, value)); } return tmp; } function disable(el) { if (document.readystate != "complete") { window.settimeout("disable(" + el.id + ")", 100); return; } var cdisabled = el.cdisabled; cdisabled = (cdisabled != null); if (!cdisabled) { el.cdisabled = true; el.innerhtml = '<span style="background: buttonshadow; width: 100%; height: 100%; text-align: center;border:1px">' + '<span style="filter:mask(color=buttonface) dropshadow(color=buttonhighlight, offx=1, offy=1, positive=0); height: 100%; width: 100%%; text-align: center;border:1px">' + el.innerhtml + '</span>' + '</span>'; if (el.onclick != null) { el.cdisabled_onclick = el.onclick; el.onclick = null; } } } function enable(el) { var cdisabled = el.cdisabled; cdisabled = (cdisabled != null); if (cdisabled) { el.cdisabled = null; el.innerhtml = el.children[0].children[0].innerhtml; if (el.cdisabled_onclick != null) { el.onclick = el.cdisabled_onclick; el.cdisabled_onclick = null; } } } function addtoggle(el) { var cdisabled = el.cdisabled; cdisabled = (cdisabled != null); var ctoggle = el.ctoggle; ctoggle = (ctoggle != null); if (!ctoggle && !cdisabled) { el.ctoggle = true; if (el.value == null) el.value = 0; if (el.onclick != null) el.ctoggle_onclick = el.onclick; else el.ctoggle_onclick = ""; el.onclick = new function("toggle(" + el.id +"); " + el.id + ".ctoggle_onclick();"); } } function removetoggle(el) { var cdisabled = el.cdisabled; cdisabled = (cdisabled != null); var ctoggle = el.ctoggle; ctoggle = (ctoggle != null); if (ctoggle && !cdisabled) { el.ctoggle = null; if (el.value) { toggle(el); } makeflat(el); if (el.ctoggle_onclick != null) { el.onclick = el.ctoggle_onclick; el.ctoggle_onclick = null; } } } function toggle(el) { el.value = !el.value; if (el.value) el.style.background = "url()"; else el.style.backgroundimage = ""; } function makeflat(el) { with (el.style) { background = ""; border = "1px solid buttonface"; padding = "1px"; } } function maeraised(el) { with (el.style) { borderleft = "1px solid #2f8bdf"; borderright = "1px solid #2f8bdf"; bordertop = "1px solid #2f8bdf"; borderbottom = "1px solid #2f8bdf"; padding = "1px"; } } function makepressed(el) { with (el.style) { borderleft = "1px solid buttonhighlight"; borderright = "1px solid buttonshadow"; bordertop = "1px solid buttonhighlight"; borderbottom = "1px solid buttonshadow"; paddingtop = "2px"; paddingleft = "2px"; paddingbottom = "0px"; paddingright = "0px"; } } function makegray(el,b) { var filtval; if (b) filtval = "gray()"; else filtval = ""; var imgs = findchildren(el, "tagname", "img"); for (var i=0; i<imgs.length; i++) { imgs[i].style.filter = filtval; } } function load(ws) { parent.location.href=ws; } function initdown() { dodown(); moveme_onmousedown(); } function initup() { doup(); moveme_onmouseup(); } function initmove() { moveme_onmousemove(); } </script> </head> <body onload='fix()' onscroll="fix()" onresize="fix()"> <span id="bar" style="position:absolute;left:0px;top:0px;width:500px; height:1px; z-index:9"> <table class=coolbar id=toolbar1 width=100%> <tr> <td class=coolbutton onclick="javascript:self.location='http://www.85time.com/85time/'">网友乒坛</td> <td class=coolbutton onclick="javascript:self.location='http://www.85time.com/engine.htm'">适用引擎</td> <td class=coolbutton onclick="javascript:self.location='http://www.85time.com/opus/opus.htm'">引荐大作</td> <td class=coolbutton onclick="javascript:self.location='http://www.85time.com/gb/'">留言板</td> <td class=coolbutton onclick="javascript:self.location='http://www.85time.com/chat/'">谈天室</td> </tr> </table> </span> </body> </html>

Javascript制作浮动的工具条

相关推荐

推荐下载

热门阅览

最新排行