Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Menu bắn súng
URL: https://www.javascriptbank.com/menushooter-index.html
Người dùng nhấn phím S để súng bắn vào các trình đơn ở bên phía trái trang web, đạn trúng trình đơn nào thì menu đó sẽ di chuyển ra ngoài cho người dùng xem. Một hiệu ứng sáng tạo và vui nhộn (^_^)!
Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Menu bắn súng
URL: https://www.javascriptbank.com/menushooter-index.html
<STYLE type=text/css>#menu1 {LEFT: -1000px; POSITION: absolute}#menu2 {LEFT: -1000px; POSITION: absolute}#menu3 {LEFT: -1000px; POSITION: absolute}#menu4 {LEFT: -1000px; POSITION: absolute}#gun1 {LEFT: -1000px; POSITION: absolute}#gun2 {LEFT: -1000px; POSITION: absolute}#bullet {LEFT: -1000px; POSITION: absolute}#hole {LEFT: -1000px; POSITION: absolute}.baseline {COLOR: #000000; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; LEFT: 175px; POSITION: absolute; TOP: 10px}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=javaScript><!-- Beginning of JavaScript -// MenuShooter by Urs Dudli , [email protected]// CONFIGURATION:// Configure the variables below:// The vertical position of your menu-items (pixels from top-margin)// If you have 4 menu-items you need 4 variables 'menuXtop'var menu1top=10var menu2top=100var menu3top=190var menu4top=280// If you have 4 menu-items you need 4 variables 'vorzeimenuX'var vorzeimenu1=-1var vorzeimenu2=-1var vorzeimenu3=-1var vorzeimenu4=-1// The horizontal position of your menu-items (pixels from left-margin)var menuleft=-115// Do not edit the variables belowvar pace=14var stepvar stepgun=10var pausegun=15var stepbullet=50var pausebullet=30var directionvar pause=25var bulletposheightvar bulletposrightvar thismenuvar vorzeichen=1var gunposrightvar gunmaxheightvar marginbottomvar menuismoving="no"// Edit ths function only if you have more or less than 4 menu-itemsfunction inite() {if (document.layers) {marginbottom=window.innerHeightgunposright=window.innerWidth-200 gunmaxheight=marginbottom-150bulletposright=gunposright-80 document.menu1.left=menuleft document.menu2.left=menuleft document.menu3.left=menuleft document.menu4.left=menuleft document.menu1.top=menu1top document.menu2.top=menu2top document.menu3.top=menu3topdocument.menu4.top=menu4topdocument.gun1.left=gunposright document.gun1.top=gunmaxheightdocument.onkeypress=keyDown document.captureEvents(Event.KEYPRESS)movegun()}if (document.all) {marginbottom=document.body.clientHeightgunmaxheight=marginbottom-150 gunposright=document.body.clientWidth-200bulletposright=gunposright-80 document.all.menu1.style.posLeft=menuleft document.all.menu2.style.posLeft=menuleft document.all.menu3.style.posLeft=menuleftdocument.all.menu4.style.posLeft=menuleft document.all.menu1.style.posTop=menu1top document.all.menu2.style.posTop=menu2top document.all.menu3.style.posTop=menu3topdocument.all.menu4.style.posTop=menu4topdocument.all.gun1.style.posLeft=gunposright document.all.gun1.style.posTop=gunmaxheightdocument.onkeydown=keyDownmovegun()}}// Edit ths function only if you have more or less than 4 menu-itemsfunction getmenuname() { if (menuismoving=="no") {if (bulletposheight>menu1top && bulletposheight<menu2top) {var clickedmenu="menu1"}else if (bulletposheight>menu2top && bulletposheight<menu3top) {var clickedmenu="menu2"}else if (bulletposheight>menu3top && bulletposheight<menu4top) {var clickedmenu="menu3"}else if (bulletposheight>menu4top && bulletposheight<menu4top+90) {var clickedmenu="menu4"}else {var clickedmenu="nohit"} if (document.layers && clickedmenu!="nohit") { thismenu=eval("document."+clickedmenu) } if (document.all && clickedmenu!="nohit") { thismenu=eval("document.all."+clickedmenu+".style") } step=paceif (clickedmenu!="nohit") {showhole() checkdirection() movemenu()} }}// Edit ths function only if you have more or less than 4 menu-itemsfunction checkdirection() {if (document.layers) { if (thismenu==document.menu1){vorzeimenu1=vorzeimenu1*-1;vorzeichen=vorzeimenu1} if (thismenu==document.menu2){vorzeimenu2=vorzeimenu2*-1;vorzeichen=vorzeimenu2} if (thismenu==document.menu3){vorzeimenu3=vorzeimenu3*-1;vorzeichen=vorzeimenu3} if (thismenu==document.menu4){vorzeimenu4=vorzeimenu4*-1;vorzeichen=vorzeimenu4} }if (document.all) { if (thismenu==document.all.menu1.style){vorzeimenu1=vorzeimenu1*-1;vorzeichen=vorzeimenu1} if (thismenu==document.all.menu2.style){vorzeimenu2=vorzeimenu2*-1;vorzeichen=vorzeimenu2} if (thismenu==document.all.menu3.style){vorzeimenu3=vorzeimenu3*-1;vorzeichen=vorzeimenu3} if (thismenu==document.all.menu4.style){vorzeimenu4=vorzeimenu4*-1;vorzeichen=vorzeimenu4} } menuismoving="yes"}function movemenu() {if (document.layers) { if (step>=0) { thismenu.left+=step*vorzeichen step-- var movetimer=setTimeout("movemenu()",pause) } else { menuismoving="no" clearTimeout(movetimer) }} if (document.all) { if (step>=0) { thismenu.posLeft+=step*vorzeichen step-- var movetimer=setTimeout("movemenu()",pause) } else { menuismoving="no" clearTimeout(movetimer) } }}function keyDown(DownEvents){if (document.all) { var k=window.event.keyCodeif (k==83 || k==115) {bulletposheight=document.all.gun1.style.posTop+50document.all.bullet.style.posTop=bulletposheightdocument.all.bullet.style.posLeft=bulletposrightshowgunup()movebullet()} }if (document.layers){var k=DownEvents.whichif (k==83 || k==115) {bulletposheight=document.gun1.top+50document.bullet.top=bulletposheightdocument.bullet.left=bulletposrightshowgunup()movebullet()}}}function movegun(){if (document.all) {if (document.all.gun1.style.posTop<-100) {stepgun=stepgun*(-1)}else if (document.all.gun1.style.posTop>gunmaxheight) {stepgun=stepgun*(-1)}document.all.gun1.style.posTop+=stepgunvar timer=setTimeout("movegun()",pausegun) }if (document.layers) {if (document.gun1.top<-100) {stepgun=stepgun*(-1)}else if (document.gun1.top>gunmaxheight) {stepgun=stepgun*(-1)}document.gun1.top+=stepgunvar timer=setTimeout("movegun()",pausegun) }}function movebullet(){if (document.all) {if (document.all.bullet.style.posLeft>20) {document.all.bullet.style.posLeft-=stepbulletwindow.status=document.all.bullet.style.posLeftvar timerbullet=setTimeout("movebullet()",pausebullet)}else {clearTimeout(timerbullet)document.all.bullet.style.posLeft=-1000getmenuname()} }if (document.layers) {if (document.bullet.left>20) {document.bullet.left-=stepbulletvar timerbullet=setTimeout("movebullet()",pausebullet)}else {clearTimeout(timerbullet)document.bullet.left=-1000getmenuname()} }}function showgunup(){if (document.all) {document.all.gun2.style.posTop=document.all.gun1.style.posTopdocument.all.gun2.style.posLeft=document.all.gun1.style.posLeftdocument.all.gun1.style.visibility="hidden" }if (document.layers) {document.gun2.top=document.gun1.topdocument.gun2.left=document.gun1.leftdocument.gun1.document.visibility="hidden" }var gunuptimer=setTimeout("hidegunup()",50)}function hidegunup(){if (document.all) {document.all.gun2.style.posLeft=-1000document.all.gun1.style.visibility="visible" }if (document.layers) {document.gun2.left=-1000document.gun1.document.visibility="show" }return}function showhole(){if (document.all) {document.all.hole.style.posTop=bulletposheight-20document.all.hole.style.posLeft=thismenu.posLeft+120 }if (document.layers) {document.hole.top=bulletposheight-20document.hole.left=thismenu.left+120 }var holetimer=setTimeout("hidehole()",200)}function hidehole(){if (document.all) {document.all.hole.style.posLeft=-1000 }if (document.layers) {document.hole.left=-1000 }return }// - End of JavaScript - --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=inite()><DIV id=menu1><IMG border=0 height=93 src="pics412.gif" useMap=#m1 width=150> <MAP name=m1><AREA coords=19,9,82,24 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank><AREA coords=17,25,82,36 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank><AREA coords=19,37,81,50 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank><AREA coords=19,51,82,64 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank><AREA coords=19,66,82,78 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank></MAP></DIV><DIV id=menu2><IMG border=0 height=93 src="fun412.gif" useMap=#m2 width=150> <MAP name=m2><AREA coords=19,9,82,24 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank><AREA coords=17,25,82,36 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank><AREA coords=19,37,81,50 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank><AREA coords=19,51,82,64 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank><AREA coords=19,66,82,78 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank></MAP></DIV><DIV id=menu3><IMG border=0 height=93 src="vip412.gif" useMap=#m3 width=150> <MAP name=m3><AREA coords=19,9,82,24 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank><AREA coords=17,25,82,36 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank><AREA coords=19,37,81,50 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank><AREA coords=19,51,82,64 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank><AREA coords=19,66,82,78 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank></MAP></DIV><DIV id=menu4><IMG border=0 height=93 src="news412.gif" useMap=#m4 width=150> <MAP name=m4><AREA coords=19,9,82,24 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank><AREA coords=17,25,82,36 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank><AREA coords=19,37,81,50 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank><AREA coords=19,51,82,64 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank><AREA coords=19,66,82,78 href="http://jsbank.topcities.com/home.jpg" shape=RECT target=_blank></MAP></DIV><DIV id=gun1><IMG src="gun412.gif" width="200" height="161"></DIV><DIV id=gun2><IMG src="gunup412.gif" width="200" height="161"></DIV><DIV id=bullet><IMG src="bullet412.gif" width="48" height="10"></DIV><DIV id=hole><IMG src="hole412.gif" width="71" height="71"></DIV><DIV class=baseline id=text> <IMG src="menuhead412.gif" width="360" height="50"> <UL> <LI><B>IMPORTANT: Wait until all images are loaded then <BR><FONT color=#ff0000>press the key 's' to shoot open a menu item.</FONT></B><BR><BR> <LI>Full-fledged slide-in-slide-out menu. <LI>This slide-menu can not be opened by clicking on a button. <LI>Instead you have to shoot open each menu-item with your Colt. <LI>The latest crossbrowser-fun by the makers of www.24fun.com. </LI></UL><UL><B>Installation</B> <LI>Delete the DIV-block with the id "text" and save all the rest as HTML-file. <LI>Put all images into the same directory as the HTML-file. <LI>Produce the imagemaps that contain your submenus. In this sample we use 4 imagemaps. They are called fun412.gif, news412.gif, pics412.gif, vip412.gif. You need 1 imagemap for each menu-item. <LI>Put those imagemaps into DIV-containers. You need as many DIV-containers as imagemaps. Call those DIV-containers menu1, menu2, menu3, menu4 and so on. <LI>Configure the position of your menu-items inside the head-section of the script. <LI>This script uses 4 menu-items. If you are useing less or more menu-items you have to edit a view variables inside the head section of the script and you have to configure the first three functions of the script as well as the style block. </UL></DIV></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/menu/MenuShooter/MenuShooter_images.zip