繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript制作浮动的工具条
- Javascript
- 经常用到的JavasScript事件的翻译
- Javascript下的keyCode键码值表
- 用javascript动态调整iframe高度的代码
- javascript应用：Iframe自适应其加载的内容高度
- javascript 控制弹出窗口
- 用javascript父窗口控制只弹出一个子窗口
- 给moz-firefox下添加IE方法和属性
- FireFox中textNode分片的问题
- 对google个性主页的拖拽效果的js的完整注释[转]
- 身份证号码前六位所代表的省,市,区, 以及地区编码下载
- 一个友好的.改善的 Object.prototype.toString的实现
- 如何写一个通用的JavaScript效果库！(1/2)
- 如何写一个通用的JavaScript效果库！(2/2)
- 几个高效，简洁的字符处理函数
- 无语，javascript居然支持中文(unicode)编程！
- ie 处理 gif动画 的onload 事件的一个 bug
- 讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
- firefox 和 ie 事件处理的细节,研究,再研究-----书写同时兼容ie和ff的事件处理代码
- 深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
- JavaScript 中的replace方法说明
Javascript 中的 javascript制作浮动的工具条
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 367 ::
收藏到网摘: n/a
当你浏览该页时，工具条始终浮在左上角，你若不喜欢，可以自己调节摆放位置！若想多页使用该代码，可以把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.
评论 (0) All
