Windows式样的按钮

稿源：互联网 2022-08-09 22:32:56 点击： 299 撤稿纠错

Windows式样的按钮，有立体感。

以下讨论的是和window 按钮相关的Windows式样的按钮教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

有什么问题请到<a href='/bbs/index.asp?boardid=2'>论坛</a>中发表<br>



<!--要完成此效果需要两个步骤

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

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 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[0].children[0].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[i].style.filter = filtval;
    }

}

<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> 

<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于Windows式样的按钮的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2008071496271.shtml方便下次再访问哦。

·上一篇： 按钮完成复制和剪切功能
·下一篇： 按钮选中文本框内所有内容

Windows式样的按钮

文章分类LIST >>返回首页

最新游戏

最新新闻