e股脑电脑教程网
  • 首 页
  • 操作系统
  • 应用软件
  • 下载工具
  • 影音视频
  • 办公软件
  • 媒体制作
  • 网站建设
  • 平面设计
  • 数据库
  • 程序开发
  • 视频教程
编辑推荐: | 文章搜索:
您现在的位置: e股脑 >> 网站建设 >> Javascript教程 >> javascript制作浮动的工具条 >> 教程正文
 
教程搜索
 
 
相关教程
  • javascript窗口功能指南之关闭窗口
  • javascript窗口功能指南之创建对话
  • javascript窗口功能指南之引用已打
  • javascript窗口功能指南之在窗口中
  • javascript窗口功能指南之操纵窗口
  • javascript窗口功能指南之检查一个
  • javascript窗口功能指南之定制新窗
  • javascript窗口功能指南之发挥窗口
  • javascript窗口功能指南之打开一个
  • 输入日期之改进模式
  • 用javascript实现利用FLASH嵌入声
  • 如何使用可以接受输入的列表框
  • 图片控制的渐变色文字
  • javascript实例教程(10) 随机显示
  • javascript实例教程(2) 创建弹出式
  • javascript 小技巧(第十集)
 
 

图文教程


  • Windows抢了谁的饭碗 非主流操作系统To

  • 地球还是火星 平常心看“非主流”

  • 综合运用Office 2007批量制作奖状

  • 没有系统盘如何才能修复受损系统?

  • 巧妙运用Excel中边界的附加功能!
 
 
赞 助 商
 
 
javascript制作浮动的工具条
  • 来源:e股脑
  • 点击次数:
  • 更新时间:2007-8-9

该程序是我从别人的网站上分析出来的!由于对方的网站使用了框架,而且又取消了鼠标的右键功能,因此费了好长时间!

当你浏览该页时,工具条始终浮在左上角,你若不喜欢,可以自己调节摆放位置!若想多页使用该代码,可以把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) {

1 2 3 下一页
  • 上一篇教程: javascript集锦之二
  • 下一篇教程: javascript实例教程(21) OLE Automation(5)
  •  

    关于本站 | 广告联系 | 版权声明 | 使用帮助

    Copyright © 2004-2008 www.egunao.com All rights reserved.