按鈕特效 - 語法區

資源小村 » 語法區 » 按鈕特效

左鍵網頁選單
<html> <head> <title></title> </head> <body> 將語法放在這裡 </body> </html>	使用說明及教學複製以下原始碼到網頁 <BODY></BODY> 之間 <script language="JavaScript"> <!--BEGIN Script var ItemEntry = new Array() // Varibles can be changed MenuWidth = 137 //設定選單寬度 MenuHeight = 150 //設定選單高度 ItemInMenu = 5 //設定選單數目 // Setup your menu words ItemEntry[0] = new MenuEntry("資源小村","http://netzhk.com") ItemEntry[1] = new MenuEntry("資源小村","http://netzhk.com") ItemEntry[2] = new MenuEntry("資源小村","http://netzhk.com") ItemEntry[3] = new MenuEntry("資源小村","http://netzhk.com") ItemEntry[4] = new MenuEntry("資源小村","http://netzhk.com") //===================DO NOT MODIFY THE CODE BELOW================ var menuEle = new Array(ItemInMenu) n = (document.layers) ? 1:0 ie = (document.all) ? 1:0 function init() { // initialize objects menu = new dynLayer("menuDiv",null) for (var k = 0; k < menuEle.length; k++) { menuEle[k] = new dynLayer("input" + k + "Div","menuDiv") } menu.hide() // initialize events document.onmousedown = mouseDown document.onmousemove = mouseMove document.onmouseup = mouseUp if (n) document.captureEvents(Event.MOUSEDOWN \| Event.MOUSEMOVE \| Event.MOUSEUP) } function MenuEntry(cap,adrs) { this.cap = cap this.adrs = adrs } // Temperary Varibles showing = false // drag variables dragActive = 0 dragObject = null dragArray = new Array() dragLayerX = 0 dragLayerY = 0 dragLayerZ = 0 function mouseDown(e) { if (showing == true) {showing = false; setTimeout('menu.hide()',50)} else if (((n && e.which == 1) \|\| ie) && showing == false) { if (n) {var xNow=e.pageX; var yNow=e.pageY} if (ie) {var xNow=event.x; var yNow=event.y} menu.moveTo(xNow, yNow) menu.show() showing = true } } function mouseMove(e) { if (n) {var x=e.pageX; var y=e.pageY} if (ie) {var x=event.x; var y=event.y} } function mouseUp(e) { if (n) {var x=e.pageX; var y=e.pageY} if (ie) {var x=event.x; var y=event.y} dragActive = 0 // put more code here to do something else when finished a drag } function dynLayer(id,nestref,des) { if (n) { if (nestref) { this.css = eval("document." + nestref + ".document." + id) this.ref = eval("document." + nestref + ".document." + id + ".document") } else { this.css = document.layers[id] this.ref = document.layers[id].document } this.x = this.css.left this.y = this.css.top this.w = this.css.clip.width this.h = this.css.clip.height } else if (ie) { this.css = document.all[id].style this.ref = document this.x = this.css.pixelLeft this.y = this.css.pixelTop this.w = this.css.pixelWidth this.h = this.css.pixelHeight } this.obj = id + "Object" eval(this.obj + "=this") this.moveBy = dynLayerMoveBy this.moveTo = dynLayerMoveTo this.show = dynLayerShow this.hide = dynLayerHide } function dynLayerMoveBy(x,y) { this.x += x this.css.left = this.x this.y += y this.css.top = this.y } function dynLayerMoveTo(x,y) { this.x = x this.css.left = this.x this.y = y this.css.top = this.y } function dynLayerShow() { if (n) this.css.visibility = "show" else if (ie) this.css.visibility = "visible" } function dynLayerHide() { if (n) this.css.visibility = "hide" else if (ie) this.css.visibility = "hidden" } document.writeln('<STYLE TYPE=\"text\/css\">') document.writeln('#menuDiv {position:absolute; left:0; top:0; width:' + MenuWidth + '; height:' + MenuHeight + '; clip:rect(0,' + MenuWidth + ',' + MenuHeight + ',0); background-color:000000; layer-background-color:000000; visibility:hidden;}') document.writeln('#menuLayer1Div {position:absolute; left:0; top:0; width:' + (MenuWidth -1) + '; height:' + (MenuHeight -1) + '; clip:rect(0,' + (MenuWidth -1) + ',' + (MenuHeight -1) + ',0); background-color:888888; layer-background-color:888888;}') document.writeln('#menuLayer2Div {position:absolute; left:1; top:1; width:' + (MenuWidth -3) + '; height:' + (MenuHeight-3) + '; clip:rect(0,' + (MenuWidth-3) + ',' + (MenuHeight -3) + ',0); background-color:D0D0D0; layer-background-color:D0D0D0;}') document.writeln('#menuLayer3Div {position:absolute; left:0; top:0; width:' + (MenuWidth -2) + '; height:' + (MenuHeight-2) + '; clip:rect(0,' + (MenuWidth-2) + ',' + (MenuHeight -2) + ',0); background-color:C0C0C0; layer-background-color:C0C0C0;}') document.writeln('#menuLayer4Div {position:absolute; left:1; top:1; width:1; height:' + (MenuHeight -3) + '; clip:rect(0,1,' + (MenuHeight -3) + ',0); background-color:E0E0E0; layer-background-color:E0E0E0;}') document.writeln('#menuLayer5Div {position:absolute; left:1; top:1; width:' + (MenuWidth -3) + '; height:1; clip:rect(0,' + (MenuWidth -3) + ',1,0); background-color:E0E0E0; layer-background-color:E0E0E0;}') document.writeln('#menuLayer6Div {position:absolute; left:3; top:3; width:' + (MenuWidth -6) + '; height:20; clip:rect(0,' + (MenuWidth -6) + ',20,0); background-color:8888FF; layer-background-color:8888FF;}') document.writeln('A.JSmenu {color:black;}') for (var k = 0; k < menuEle.length; k++) { document.writeln('#input' + k + 'Div {position:absolute; left:3; top:' + (20 * (k+1) + 3) + '; width:' + (MenuWidth-6) + '; height:20; clip:rect(0,' + (MenuWidth -6) + ',20,0); background-color:C0C0C0; layer-background-color:C0C0C0;}') } document.writeln('<\/STYLE>') document.writeln('<DIV ID="menuDiv">') document.writeln('<DIV ID="menuLayer1Div"></DIV>') document.writeln('<DIV ID="menuLayer2Div"></DIV>') document.writeln('<DIV ID="menuLayer3Div"></DIV>') document.writeln('<DIV ID="menuLayer4Div"></DIV>') document.writeln('<DIV ID="menuLayer5Div"></DIV>') document.writeln('<DIV ID="menuLayer6Div"><FONT Size=3><CENTER>網頁選單</CENTER></FONT></DIV>') for (var k = 0; k < menuEle.length; k++) { document.writeln('<DIV ID="input' + k + 'Div"> <FONT SIZE="2"><A CLASS="JSmenu" HREF="' + ItemEntry[k].adrs + '">' + ItemEntry[k].cap + '</FONT></A></DIV>') } document.writeln('</DIV>') init() // --> </script> 可以修改原始碼的內容 ( 修改以下紅色的部分，原始碼中所有以下的部份要修改 ) ItemEntry[0] = new MenuEntry("資源小村","http://netzhk.com") ItemEntry[1] = new MenuEntry("資源小村","http://netzhk.com") ItemEntry[2] = new MenuEntry("資源小村","http://netzhk.com") ItemEntry[3] = new MenuEntry("資源小村","http://netzhk.com") ItemEntry[4] = new MenuEntry("資源小村","http://netzhk.com")

左鍵網頁選單

<html>

<head>

<title></title>

</head>

<body>

將語法放在這裡

</body>

</html>

使用說明及教學

複製以下原始碼到網頁 <BODY></BODY> 之間

var ItemEntry = new Array()

// Varibles can be changed
MenuWidth = 137  //設定選單寬度
MenuHeight = 150 //設定選單高度
ItemInMenu = 5   //設定選單數目

// Setup your menu words
ItemEntry[0] = new MenuEntry("資源小村","http://netzhk.com")       
ItemEntry[1] = new MenuEntry("資源小村","http://netzhk.com")
ItemEntry[2] = new MenuEntry("資源小村","http://netzhk.com")
ItemEntry[3] = new MenuEntry("資源小村","http://netzhk.com")
ItemEntry[4] = new MenuEntry("資源小村","http://netzhk.com")

//===================DO NOT MODIFY THE CODE BELOW================
var menuEle = new Array(ItemInMenu)
n = (document.layers) ? 1:0
ie = (document.all) ? 1:0

function init() {
        // initialize objects
        menu = new dynLayer("menuDiv",null)
        for (var k = 0; k < menuEle.length; k++) {
                menuEle[k] = new dynLayer("input" + k + "Div","menuDiv")
                }
        menu.hide()

// initialize events
        document.onmousedown = mouseDown
                document.onmousemove = mouseMove
                document.onmouseup = mouseUp
                if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}

function MenuEntry(cap,adrs) {
this.cap = cap
this.adrs = adrs
}

// Temperary Varibles
showing = false

// drag variables
dragActive = 0
dragObject = null
dragArray = new Array()
dragLayerX = 0
dragLayerY = 0
dragLayerZ = 0

}
function mouseMove(e) {
        if (n) {var x=e.pageX; var y=e.pageY}
                if (ie) {var x=event.x; var y=event.y}
}
function mouseUp(e) {
        if (n) {var x=e.pageX; var y=e.pageY}
                if (ie) {var x=event.x; var y=event.y}
                dragActive = 0
        // put more code here to do something else when finished a drag
}

function dynLayer(id,nestref,des) {
        if (n) {
                if (nestref) {
                        this.css = eval("document." + nestref + ".document." + id)
                                this.ref = eval("document." + nestref + ".document." + id + ".document")
                }
                else {
                        this.css = document.layers[id]
                                this.ref = document.layers[id].document
                }
                        this.x = this.css.left
                        this.y = this.css.top
                        this.w = this.css.clip.width
                        this.h = this.css.clip.height
        }
        else if (ie) {
                this.css = document.all[id].style
                        this.ref = document
                        this.x = this.css.pixelLeft
                        this.y = this.css.pixelTop
                        this.w = this.css.pixelWidth
                        this.h = this.css.pixelHeight
        }
        this.obj = id + "Object"
                eval(this.obj + "=this")
                this.moveBy = dynLayerMoveBy
                this.moveTo = dynLayerMoveTo
                this.show = dynLayerShow
                this.hide = dynLayerHide
}
function dynLayerMoveBy(x,y) {
        this.x += x
                this.css.left = this.x
                this.y += y
                this.css.top = this.y
}
function dynLayerMoveTo(x,y) {
        this.x = x
                this.css.left = this.x
                this.y = y
                this.css.top = this.y
}
function dynLayerShow() {
        if (n) this.css.visibility = "show"
                else if (ie) this.css.visibility = "visible"
}
function dynLayerHide() {
        if (n) this.css.visibility = "hide"
                else if (ie) this.css.visibility = "hidden"
}

for (var k = 0; k < menuEle.length; k++) {
        document.writeln('#input' + k + 'Div {position:absolute; left:3; top:' + (20 * (k+1) + 3) + '; width:' + (MenuWidth-6) + '; height:20; clip:rect(0,' + (MenuWidth -6) + ',20,0); background-color:C0C0C0; layer-background-color:C0C0C0;}')
        }

document.writeln('<\/STYLE>')
document.writeln('<DIV ID="menuDiv">')
document.writeln('<DIV ID="menuLayer1Div"></DIV>')
document.writeln('<DIV ID="menuLayer2Div"></DIV>')
document.writeln('<DIV ID="menuLayer3Div"></DIV>')
document.writeln('<DIV ID="menuLayer4Div"></DIV>')
document.writeln('<DIV ID="menuLayer5Div"></DIV>')
document.writeln('<DIV ID="menuLayer6Div"><FONT Size=3><CENTER>網頁選單</CENTER></FONT></DIV>')
for (var k = 0; k < menuEle.length; k++) {
        document.writeln('<DIV ID="input' + k + 'Div">     <FONT  SIZE="2"><A CLASS="JSmenu" HREF="' + ItemEntry[k].adrs + '">' + ItemEntry[k].cap + '</FONT></A></DIV>')
        }
document.writeln('</DIV>')
init()
// -->
</script>

可以修改原始碼的內容 ( 修改以下紅色的部分，原始碼中所有以下的部份要修改 )

ItemEntry[0] = new MenuEntry("資源小村","http://netzhk.com")
ItemEntry[1] = new MenuEntry("資源小村","http://netzhk.com")
ItemEntry[2] = new MenuEntry("資源小村","http://netzhk.com")
ItemEntry[3] = new MenuEntry("資源小村","http://netzhk.com")
ItemEntry[4] = new MenuEntry("資源小村","http://netzhk.com")

論壇登入

熱門投票

資源小村 » 語法區 » 按鈕特效

名稱
密碼