设为首页·收藏本页
交友   手机游戏  扑虎网铃声  免费短信  扑虎网图片  picasa相册      
首页>互联网>语言脚本>JavaScript>正文

javascript制作浮动的工具条

日　期：2006-10-22     来　源：    阅 读:
　　

　该程序是我从别人的网站上分析出来的！由于对方的网站使用了框架，而且又取消了鼠标的右键功能，因此费了好长时间！
当你浏览该页时，工具条始终浮在左上角，你若不喜欢，可以自己调节摆放位置！若想多页使用该代码，可以把JSP程序部分写成JS的文件，然后再通过调用来实现，有不明白的地方，欢迎各位与我交流！

<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 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 id=toolbar1 width=100%>
<tr>
<td onclick="javascript:self.location='http://www.85time.com/85time/'">网友论坛</td>
<td onclick="javascript:self.location='http://www.85time.com/engine.htm'">实用引擎</td>
<td onclick="javascript:self.location='http://www.85time.com/opus/opus.htm'">推荐作品</td>
<td onclick="javascript:self.location='http://www.85time.com/gb/'">留言板</td>
<td onclick="javascript:self.location='http://www.85time.com/chat/'">聊天室</td>
</tr>
</table>
</span>
</body>
</html>

上一篇：javascript设计漫天雪花   下一篇：javascript制作闪烁的边框
收藏本文到:
digg this! 添加到del.icio.us bbmao网络收藏夹 添加到365key 我顶 添加到bolaa 推荐到奇客发现 添加到新浪vivi 添加到google书签 添加到yahoo+
查看全部JavaScript内容  
  • javascript设计漫天雪花　 2006-10-22 00:00:00
       原代码插入到body下面:script language="JavaScript" !-- N = 40; Y = new Array(); X = new Array(); S = new Array(); A = new Array(); B = new Array(); M = new Array...[阅读全文]
  • javascript制作闪烁的边框　 2006-10-22 00:00:00
       本文介绍用JS来制作闪烁的边框，演示地址：http://www.85time.com首页，我仅制作了一个闪烁的边框，若想一个以上的边框都能闪烁，可以定义多个变量，本文中，我仅定义了一...[阅读全文]
  • javascript[对象.属性]集锦之三　 2006-10-22 00:00:00
       document对象 含有当前文档信息的对象. 属性 title 当前文档标题,如果未定义,则包含"Untitled". location 文档的全URL. lastModified 含有文档最后修改日期. referrer 调用...[阅读全文]
  • 在IE中使用javascript(一)　 2006-10-22 00:00:00
       ...[阅读全文]
  • javascript[对象.属性]集锦之二　 2006-10-22 00:00:00
       frame对象 它是整个浏览器窗口的子窗口,除了status,defaultStatus,name属性外,它拥有window对象的全部属性. location对象 含有当前URL的信息. 属性 href 整个URL字符串. pr...[阅读全文]
  • 在IE中使用javascript(二)　 2006-10-22 00:00:00
       ...[阅读全文]
  • javascript[对象.属性]集锦之一　 2006-10-22 00:00:00
       SCRIPT 标记 用于包含JavaScript代码. 语法 属性 LANGUAGE 定义脚本语言 SRC 定义一个URL用以指定以.JS结尾的文件 windows对象 每个HTML文档的顶层对象. 属性 frames[] 子...[阅读全文]
  • javascript 小技巧(第一集)　 2006-10-22 00:00:00
       第一集 如何用滑鼠控制Web页面 在这一部分首先要为你展示的JavaScript特性是将你的滑鼠移到这个不同颜色的连结上面，此时看看浏览器下的状态列有何结果，然后这样的功能我...[阅读全文]
  • javascript 小技巧(第十集)　 2006-10-22 00:00:00
       第十集 JAVASCRIPT基础(2) 二、如何执行JaveScript Netscape2.0beta3版以上，就可以执行JavaScript的功能了。我们测试过至少beta3版以上可以。目前为止，除了Netscape外，...[阅读全文]
  • javascript 小技巧(第二集)　 2006-10-22 00:00:00
       第二集 如何在页面内加入日期 我们要告诉你一个使用日期和时间的例子，是从你个人客户端机器获取日期和时间。 做法如下： ＜script language="LiveScript" ＜!-- Hiding to...[阅读全文]
  • javascript 小技巧(第九集)　 2006-10-22 00:00:00
       第九集 JAVASCRIPT基础(1) 一、什么是JAVASCRIPT语言? JavaScript是一种新的描述语言，此一语言可以被箝入HTML的文件之中，透过JavaScript可以做到回应使用者的需求事件(如...[阅读全文]
  • javascript实例教程(21-10)　 2006-10-22 00:00:00
       使用JavaScript中的OLE Automation 6. 怎样提高脚本程序的性能 自从我们处理重的对象模型（比如Word.Application）和应用程序实例，注意系统的资源示相当重要的。一旦我们...[阅读全文]
  • javascript 小技巧(第八集)　 2006-10-22 00:00:00
       第八集 如何自动加上最后修改时间 我们在 HTML 文件档完成了以后，常会加上一行文件最后修改的日期。现在你可不用担心每次都要去改或是忘了改了，你可以很简单的写一个如下...[阅读全文]
  • javascript实例教程(21-11)　 2006-10-22 00:00:00
       使用JavaScript中的OLE Automation 7. 怎样处理集对象 Automation对象与其它的Jscript对象有些有相同的结构。它暴露了多种方法和属性，我们可以对它们进行处理。如果你从来...[阅读全文]
  • javascript 小技巧(第七集)　 2006-10-22 00:00:00
       第七集 如何去产生乱数 接下来我们要为你介绍一个可以产生乱数的函数，也是以 JavaScript 所写的这个函数只是利用了一点小技巧而已。而这种技巧在大部分的编译器(compiler)...[阅读全文]
  • 图片控制的渐变色文字(2)　 2006-10-22 00:00:00
       演示中小阳用了以下这幅图片： 这是很简单的动画，只是元件位置的移动而已，自己做一个也不难吧。下面介绍实现的代码： !-- 第一步，设置背景图片。我们把它的尺寸设到最小...[阅读全文]
  • javascript 小技巧(第六集)　 2006-10-22 00:00:00
       以下是我们所制作的跑马灯效果的源程序 ＜html ＜head ＜script language="JavaScript" ＜!-- Hide var scrtxt="这儿的讯息可以改为你要告诉别人的话 "+" 或是注意事项 ......[阅读全文]
  • 用javascript实现浏览器地震效果　 2006-10-22 00:00:00
       一种把人吓一跳的感觉。实现方法是，把下面的JavaScript代码加入到 body与 /body之间： script language="JavaScript" function surfto(form) { var myindex=form.select1....[阅读全文]
  • javascript 小技巧(第五集)　 2006-10-22 00:00:00
       以下是原始语法 ＜HTML ＜HEAD ＜TITLE浏览器的状态栏＜/TITLE ＜/HEAD ＜BODY BGCOLOR="#FFFFFF" ＜SCRIPT language="JavaScript" ＜!-- Hide function statbar(txt) { ...[阅读全文]
  • 用javascript实现文件夹轻松加密　 2006-10-22 00:00:00
       电脑里经常会存储着重要文件，这些文件需要进行加密，有许多方法来实现。但如果想对一个文件夹里的所有文件都进行加密，数量少还可以，要是数量多岂不是得把人累死？ 因此...[阅读全文]
 用户名： （新注册） 密码： 匿名发表 评论(0条)
 评论内容：(不能超过250字，不支持HTML或代码，只能发表纯文字，请自觉遵守互联网相关政策法规。)
[an error occurred while processing this directive]
热点搜索

内衣写真 汤加丽人体艺术 裸体模特 偷拍 美女视频 诱惑自拍 美女性感 张靓颖走光 清纯少女 劲舞视频 经典搞笑 后舍男生 性感美女 花花公子 美女街舞 广告欣赏 全智贤

娱乐中心精华推荐
资讯中心精华推荐



合作伙伴: 电脑综合 8vv8娱乐榜

关于扑虎　|　扑虎新闻　|　联系扑虎　|　广告服务　|　招贤纳士

Copyright @ 2006-2007 poohu.com. All Right Reserved 陕ICP备06010975号