首页 美食 育儿 手工 生活 美妆 美容 设计 电脑 综合
电脑网络
搜索
首页 电脑网络 全部栏目 电脑网络最新信息

Javascript制作浮动的工具条

2016-01-29 11:49 15 1 收藏

Javascript制作浮动的工具条,Javascript制作浮动的工具条

【 tulaoshi.com - Javascript 】

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

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/javascript/）
<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;

来源:http://www.tulaoshi.com/n/20160129/1483483.html

看过《Javascript制作浮动的工具条》的人还看了以下文章 更多>>

延伸阅读
《征途2》庄园工具条
标签： 网络游戏
《征途2》庄园工具条 庄园简介 庄园建筑 庄园工具条 种植与收获 庄园迁移 庄园排行榜     点击屏幕右上角的小房子按钮，即可打开庄园工具条。不管是否在庄园，都可通过工具条实现回庄园，购买庄园道具的操作。 庄园工具条 从左至右依次为： 离开庄园：不从庄园出口直接离...
一步步制作真彩工具条
标签： C语言教程 C语言函数
一步步制作真彩工具条 作者：skyformat99 下载源代码 例子程序最终效果图： 一直在寻找制作一个 24bit 及以上真彩工具条的简单有效方法，在各种VC站点都找到了很多有关这方面的文章和介绍，但是都存在一个不足的地方，介绍的不够详细，对初学者来说...
可以显示多行文字的工具条
标签： C语言教程 C语言函数
可以显示多行文字的工具条 作者：ahr 下载源代码 界面显示效果如图一： 图一 例子程序运行画面 CToolBar不支持多行文字，本文将通过一个定制的MFC/C++类 CMTToolBar 实现在工具条中显示多行文字。其思路是先把文字变成位图，再替换原...
让工具条显示256色图像
标签： C语言教程 C语言函数
如何让工具条显示256色图像 编译：hangwire 下载范例源代码 问题：    论坛中有很多人提出：基于Windows的程序如资源管理器（Explorer.exe），IE等都能显示出漂亮的工具栏图像和图标。但是，用MFC开发的应用程序一般都只能显示16色的工具栏图像和列表视图（如CListView）图像，...
如何实现24位色工具条
标签： C语言教程 C语言函数
如何实现24位色工具条 作者/NorthTibet 下载源代码 大家知道IE的工具条都是多彩的，本文介绍如何在自己的应用程序里实现24位色工具条。如图一所示： 图一  第一步： 在mainframe.h文件中声明成员变量： CToolBar m_ho...
查看更多精彩>>
奋斗的青春CH 奋斗的青春CH

经验教程

358

收藏

60
最新文章
Javascript

精华推荐

如何赶走烦人的嵌入式工具条

如何赶走烦人的嵌入式工具条

zniggang358

如何嵌入（Docking）一个工具条

如何嵌入（Docking）一个工具条

喵小奇2015

如何让工具条显示256色图像

如何让工具条显示256色图像

wxh607lbwt6rah

热门标签

化妆工具 喂养工具 上妆工具 相框的制作 工具配件 WEB工具 底妆工具 立体贺卡的制作 礼物盒的制作 镂空灯罩的制作 元旦贺卡的制作 Excel制作工资条 辅食工具 美甲工具 定妆工具 开发工具 PPT制作相册的方法 Excel怎么制作工资条 立体爱心贺卡的制作 生日贺卡制作的方法