javascript制作浮动的工具条

2016-01-29 11:32 9 1 收藏

javascript制作浮动的工具条,&#106avascript制作浮动的工具条

【 tulaoshi.com - Javascript 】

  该程序是我从别人的网站上分析出来的!由于对方的网站使用了框架,而且又取消了鼠标的右键功能,因此费了好长时间!
当你浏览该页时,工具条始终浮在左上角,你若不喜欢,可以自己调节摆放位置!若想多页使用该代码,可以把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.

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

延伸阅读
  简单的放大缩小,显示坐标功能。 ------------------------------------- 演示代码: ------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" <HTML <HEAD <TITLE Document </TITLE <style type="text/css" body{  padding : 0px ;  margin : 0px;  ...
  利用JavaScript制作倒计时牌 五一劳动节很快就到了。哈哈,到时可以出去好好玩一玩了。是不是在掐指计算了。下面教你一种方法在网页上面制作倒计时牌,这样就方便多了。 把下面的JavaScript代码加入到< body < /body 中即可。 < script language="JavaScript" var urodz= new Date("5/1/2002"); var s="今天离...
  最近因为学校做网站设计,所以一直在ASP上和数据库上大费苦心。 我在前一个阶段是做Java程序设计的。突然接到任务并学习ASP,所以我一直都热忠并善于利用JavaScript来构架ASP程序。 JavaScript的一个明显的优点就在于它可以定义和持有自己的对象。这一点好象是VBScript所无法比拟的。 有了这一点,可以利用J...
  在浏览器中显示信息  
增加一个真彩的位图,IDB_BITMAP1 在Frame头文件中定义一个变量:CBitmap m_ToolbarBMP; 把.cpp中的LoadToolBar(...)去掉,加上如下代码: m_ToolbarBMP.LoadBitmap(IDB_BITMAP1); m_wndToolBar.SetBitmap(m_ToolbarBMP); UINT IDArray[] = {ID_FILE_NEW, ID_FILE_NEW, ID_FILE_NEW}; m_wndToolBar.SetButtons(IDArray, 3);...

经验教程

331

收藏

95
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部