coolButton------JavaScript

最新推荐文章于 2025-04-25 16:47:55 发布

lwqadmin

最新推荐文章于 2025-04-25 16:47:55 发布

阅读量762

点赞数

文章标签： function null filter border html javascript

本文链接：https://blog.youkuaiyun.com/lwqadmin/article/details/103667

版权

该博客主要展示了使用JavaScript实现coolButton交互效果的代码。包含coolButton.js文件，定义了鼠标事件处理函数，如鼠标悬停、移出、按下、点击等，还定义了禁用、启用按钮等功能函数。同时给出了coolbutton.html文件，引入js文件并展示了按钮效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.coolButton.js

document.onmouseover = doOver;
document.onmouseout = doOut;
document.onmousedown = doDown;
document.onmouseup = doUp;
document.onclick = doClick;
function doOver() {
var toEl = getReal(window.event.toElement, "className", "coolButton");
var fromEl = getReal(window.event.fromElement, "className", "coolButton");
if (toEl == fromEl) return;
var el = toEl;

var cDisabled = el.cDisabled;

cDisabled = (cDisabled != null);

if (el.className == "coolButton")
  el.onselectstart = new Function("return false");

if ((el.className == "coolButton") && !cDisabled) {
  if(el.havearrow==1){
  makeRaised(el);
  makeRaised(eval(el.aname));
  }
  else{makeRaised(el);}

}
}

function doOut() {
var toEl = getReal(window.event.toElement, "className", "coolButton");
var fromEl = getReal(window.event.fromElement, "className", "coolButton");
if (toEl == fromEl) return;
var el = fromEl;

var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null);

var cToggle = el.cToggle;
toggle_disabled = (cToggle != null);

if (cToggle && el.value) {

  makePressed(el);

}
else if ((el.className == "coolButton") && !cDisabled) {
  if(el.havearrow==1){
  makeFlat(el);
  makeFlat(eval(el.aname));
  }
  else{makeFlat(el);}
  makeFlat(el);

}

}

function doDown() {
el = getReal(window.event.srcElement, "className", "coolButton");

var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null); // If CDISABLED atribute is present

if ((el.className == "coolButton") && !cDisabled) {
makePressed(el)

}
}

function doClick() {
el = getReal(window.event.srcElement, "className", "coolButton");

var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null);

if ((el.className == "coolButton") && !cDisabled) {
makePressed(el)

}
}

function doUp() {
el = getReal(window.event.srcElement, "className", "coolButton");

var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null);

if ((el.className == "coolButton") && !cDisabled) {
makeRaised(el);
}
}

function disable(el) {

if (document.readyState != "complete") {
  window.setTimeout("disable(" + el.id + ")", 100);
  return;
}

var cDisabled = el.cDisabled;

cDisabled = (cDisabled != null);
if (!cDisabled) {
  el.cDisabled = true;

  if (document.getElementsByTagName) {
   el.innerHTML = "<span style='background: buttonshadow; filter: chroma(color=red) dropshadow(color=buttonhighlight, offx=1, offy=1); width: 100%; height: 100%; text-align: center;'>" +
       "<span style='filter: mask(color=red); width: 100%; height: 100%; text-align: center;'>" +
       el.innerHTML +
       "</span>" +
       "</span>";
  }
  else { // IE4
   el.innerHTML = '<span style="background: buttonshadow; width: 100%; height: 100%; text-align: center;">' +
       '<span style="filter:Mask(Color=buttonface) DropShadow(Color=buttonhighlight, OffX=1, OffY=1, Positive=0); height: 100%; width: 100%%; text-align: center;">' +
       el.innerHTML +
       '</span>' +
       '</span>';
  }

  if (el.onclick != null) {
   el.cDisabled_onclick = el.onclick;
   el.onclick = null;
  }
}
}

function enable(el) {
var cDisabled = el.cDisabled;

cDisabled = (cDisabled != null);

if (cDisabled) {
el.cDisabled = null;
el.innerHTML = el.children[0].children[0].innerHTML;

  if (el.cDisabled_onclick != null) {
   el.onclick = el.cDisabled_onclick;
   el.cDisabled_onclick = null;
  }
}
}

function makeFlat(el) {
with (el.style) {
  background = "";
  border = "1px solid buttonface";
  padding      = "1px";
}
}

function makeRaised(el) {
with (el.style) {
  borderLeft   = "1px solid buttonhighlight";
  borderRight = "1px solid buttonshadow";
  borderTop    = "1px solid buttonhighlight";
  borderBottom = "1px solid buttonshadow";
  padding      = "1px";
}
}

function makePressed(el) {
with (el.style) {
  borderLeft   = "1px solid buttonshadow";
  borderRight = "1px solid buttonhighlight";
  borderTop    = "1px solid buttonshadow";
  borderBottom = "1px solid buttonhighlight";
  paddingTop    = "2px";
  paddingLeft   = "2px";
  paddingBottom = "0px";
  paddingRight = "0px";
}
}

二.coolbutton.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script language="javascript" src="coolbuttons.js"></script>
</HEAD>

<BODY>
<table bgcolor=buttonface>
   <tr>
      <td class="coolButton" nowrap height=10 width=100>  coolbutton  </td>
   <td class="coolButton" nowrap height=10 width=100>  url  </td>
   </tr>
</table>
</BODY>
</HTML>