繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript制作浮动的工具条
- Javascript
- javascript模仿msgbox提示效果代码
- javascript table美化鼠标滑动单元格变色
- 告诉大家什么是JSON
- json 定义
- json跟xml的对比分析
- jQuery实用技巧
- JQuery实现自定义对话框的代码
- 强烈推荐240多个jQuery插件提供下载
- 豆瓣网的jquery代码实例
- 使用 JavaScript 创建可维护的幻灯片效果代码
- 动感超强的JS图片轮换特效
- 一个小型js框架myJSFrame附API使用帮助
- Javascript入门学习第二篇 js类型
- Javascript入门学习第三篇 js运算
- Javascript入门学习第四篇 js对象和数组
- jQuery基础教程笔记适合js新手
- 图片自动缩小 点击放大
- 非常不错的功能强大代码简单的管理菜单美化版
- js 新浪的一个图片播放图片轮换效果代码
- javascript import css实例代码
Javascript 中的 javascript制作浮动的工具条
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 132 ::
收藏到网摘: 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
