ybkftxz 发表于 2007-4-27 11:09:17

***按钮特效***windows式样的按钮

把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件
<!--网页特效代码由驿站jojoo.net/ts提供!-->
要完成此效果需要两个步骤

第一步:把如下代码加入到<head>区域中

<script>
document.onmouseover = doover;
document.onmouseout= doout;
document.onmousedown = dodown;
document.onmouseup   = doup;


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 cdisabled atribute is present
   
    if (el.classname == "coolbutton")
      el.onselectstart = new function("return false");
   
    if ((el.classname == "coolbutton") && !cdisabled) {
      makeraised(el);
      makegray(el,false);
    }
}

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); // if cdisabled atribute is present

    var ctoggle = el.ctoggle;
    toggle_disabled = (ctoggle != null); // if ctoggle atribute is present

    if (ctoggle && el.value) {
      makepressed(el);
      makegray(el,true);
    }
    else if ((el.classname == "coolbutton") && !cdisabled) {
      makeflat(el);
      makegray(el,true);
    }

}

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 doup() {
    el = getreal(window.event.srcelement, "classname", "coolbutton");
   
    var cdisabled = el.cdisabled;
    cdisabled = (cdisabled != null); // if cdisabled atribute is present
   
    if ((el.classname == "coolbutton") && !cdisabled) {
      makeraised(el);
    }
}


function getreal(el, type, value) {
    temp = el;
    while ((temp != null) && (temp.tagname != "body")) {
      if (eval("temp." + type) == value) {
            el = temp;
            return el;
      }
      temp = temp.parentelement;
    }
    return el;
}

function findchildren(el, type, value) {
    var children = el.children;
    var tmp = new array();
    var j=0;
   
    for (var i=0; i<children.length; i++) {
      if (eval("children." + type + "==\"" + value + "\"")) {
            tmp = children;
      }
      tmp = tmp.concat(findchildren(children, type, value));
    }
   
    return tmp;
}

function disable(el) {

    if (document.readystate != "complete") {
      window.settimeout("disable(" + el.id + ")", 100);    // if document not finished rendered try later.
      return;
    }
   
    var cdisabled = el.cdisabled;
   
    cdisabled = (cdisabled != null); // if cdisabled atribute is present

    if (!cdisabled) {
      el.cdisabled = true;
      
      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 atribute is present
   
    if (cdisabled) {
      el.cdisabled = null;
      el.innerhtml = el.children.children.innerhtml;

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

function addtoggle(el) {
    var cdisabled = el.cdisabled;
   
    cdisabled = (cdisabled != null); // if cdisabled atribute is present
   
    var ctoggle = el.ctoggle;
   
    ctoggle = (ctoggle != null); // if ctoggle atribute is present

    if (!ctoggle && !cdisabled) {
      el.ctoggle = true;
      
      if (el.value == null)
            el.value = 0;      // start as not pressed down
      
      if (el.onclick != null)
            el.ctoggle_onclick = el.onclick;    // backup the onclick
      else
            el.ctoggle_onclick = "";

      el.onclick = new function("toggle(" + el.id +"); " + el.id + ".ctoggle_onclick();");
    }
}

function removetoggle(el) {
    var cdisabled = el.cdisabled;
   
    cdisabled = (cdisabled != null); // if cdisabled atribute is present
   
    var ctoggle = el.ctoggle;
   
    ctoggle = (ctoggle != null); // if ctoggle atribute is present
   
    if (ctoggle && !cdisabled) {
      el.ctoggle = null;

      if (el.value) {
            toggle(el);
      }

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

function toggle(el) {
    el.value = !el.value;
   
    if (el.value)
      el.style.background = "url(/images/tileback.gif)";
    else
      el.style.backgroundimage = "";

//    doout(el);   
}


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";
    }
}

function makegray(el,b) {
    var filtval;
   
    if (b)
      filtval = "gray()";
    else
      filtval = "";

    var imgs = findchildren(el, "tagname", "img");
      
    for (var i=0; i<imgs.length; i++) {
      imgs.style.filter = filtval;
    }

}
   

document.write("<style>");
document.write(".coolbar    {background: buttonface;border-top: 1px solid buttonhighlight;    border-left: 1px solid buttonhighlight;    border-bottom: 1px solid buttonshadow; border-right: 1px solid buttonshadow; padding: 2px; font: menu;}");

document.write(".coolbutton {border: 1px solid buttonface; padding: 1px; text-align: center; cursor: default;}");
document.write(".coolbutton img    {filter: gray();}");
document.write("</style>");
</script>


第二步:把如下代码加入到<body>区域中

<table class="coolbar">
<tr>
      <td class="coolbutton"> <font size="3"><b><font color="#000000">home</font></b></font>
      </td>      
      <td class="coolbutton"> <font size="3"><b><font color="#000000">link</font></b></font>
      </td>
</tr>
</table>
      










--------------------------------------

拥有三人行论坛管理系列软件,一个人就可以管理一个论坛的更新维护。还能使您的论坛有千人在线的真实火暴效果,让您不在为论坛因没有人气而留不住会员而烦恼,使您的论坛早日成为一流的论坛。详情请登陆网站:http://www.cnsrx.cn 三人行论坛管理软件,站长必备的专业好工具。(您使用的是免费版本,购买收费版本后,将不带广告。业务QQ:247216 44985227)
页: [1]
查看完整版本: ***按钮特效***windows式样的按钮