Javascript制作浮动的工具条-js教程-PHP中文网

Javascript制作浮动的工具条

黄舟

发布： 2016-12-21 15:20:27

原创

1502人浏览过

该程序是我从别人的网站上分析出来的！由于对方的网站使用了框架，而且又取消了鼠标的右键功能，因此费了好长时间！
当你浏览该页时，工具条始终浮在左上角，你若不喜欢，可以自己调节摆放位置！若想多页使用该代码，可以把jsp程序部分写成js的文件，然后再通过调用来实现，有不明白的地方，欢迎各位与我交流！
演示地址：http://www.85time.com/softuse/bar.htm
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<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 makeraised(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>