Phiên bản đầy đủ: jsB@nk » Trình đơn » Menu với hiệu ứng chuyển tiếp
URL: https://www.javascriptbank.com/multimedia-rollovers-menu-mulrollmenu2.html
Đoạn mã tạo một trình đơn trên trang web với hiệu ứng chuyển tiếp ảnh nền của trình đơn mỗi khi người dùng rê con trỏ chuột đến các mục chọn. Hiệu ứng có tất cả 23 kiểu chuyển tiếp, đồng thời hiệu ứng cho phép bạn chọn kiểu chuyển tiếp muốn xem thông qua một trình đơn xổ dọc.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Menu với hiệu ứng chuyển tiếp
URL: https://www.javascriptbank.com/multimedia-rollovers-menu-mulrollmenu2.html
<SCRIPT type=text/javascript>//Set a specific transition rollover (transition=0 to 23)document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=1,transition=0) }</STYLE>');var onImages=new Array();function Rollover(imgName, imgSrc){onImages[imgName] = new Image();onImages[imgName].src = imgSrc;}function turnOn(imgName){ if(document.images[imgName].filters != null)document.images[imgName].filters[0].stop();document.images[imgName].offSrc = document.images[imgName].src;document.images[imgName].src = onImages[imgName].src;}function turnOff(imgName){ if(document.images[imgName].filters != null)document.images[imgName].filters[0].apply();document.images[imgName].src = document.images[imgName].offSrc;if(document.images[imgName].filters != null)document.images[imgName].filters[0].play();}Rollover("link1", "../../image/logojs.gif");Rollover("link2", "../../image/logojs.gif");Rollover("link3", "../../image/logojs.gif");Rollover("link4", "../../image/logojs.gif");Rollover("link5", "../../image/logojs.gif");Rollover("link6", "../../image/logojs.gif");Rollover("link7", "../../image/logojs.gif");Rollover("link8", "../../image/logojs.gif");Rollover("link9", "../../image/logojs.gif");</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><IMG class=imgTrans src="link_off.gif" border=0 name=link1 width="100" height="15"></A><BR><A onmouseover="turnOn('link2');" onmouseout="turnOff('link2');" href="http://JavaScriptBank.com/"><IMG class=imgTrans src="link_off.gif" border=0 name=link2 width="100" height="15"></A><BR><A onmouseover="turnOn('link3');" onmouseout="turnOff('link3');" href="http://JavaScriptBank.com/"><IMG class=imgTrans src="link_off.gif" border=0 name=link3 width="100" height="15"></A><BR><A onmouseover="turnOn('link4');" onmouseout="turnOff('link4');" href="http://JavaScriptBank.com/"><IMG class=imgTrans src="link_off.gif" border=0 name=link4 width="100" height="15"></A><BR><A onmouseover="turnOn('link5');" onmouseout="turnOff('link5');" href="http://JavaScriptBank.com/"><IMG class=imgTrans src="link_off.gif" border=0 name=link5 width="100" height="15"></A><BR><A onmouseover="turnOn('link6');" onmouseout="turnOff('link6');" href="http://JavaScriptBank.com/"><IMG class=imgTrans src="link_off.gif" border=0 name=link6 width="100" height="15"></A><BR><A onmouseover="turnOn('link7');" onmouseout="turnOff('link7');" href="http://JavaScriptBank.com/"><IMG class=imgTrans src="link_off.gif" border=0 name=link7 width="100" height="15"></A><BR><A onmouseover="turnOn('link8');" onmouseout="turnOff('link8');" href="http://JavaScriptBank.com/"><IMG class=imgTrans src="link_off.gif" border=0 name=link8 width="100" height="15"></A><BR><A onmouseover="turnOn('link9');" onmouseout="turnOff('link9');" href="http://JavaScriptBank.com/"><IMG class=imgTrans src="link_off.gif" border=0 name=link9 width="100" height="15"></A><BR></P><FORM name=ttype>document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=1, <SELECT onchange=setTrans(this.selectedIndex) name=ProductSelection> <OPTION selected>transition=0</OPTION> <OPTION>transition=1</OPTION> <OPTION>transition=2</OPTION> <OPTION>transition=3</OPTION> <OPTION>transition=4</OPTION> <OPTION>transition=5</OPTION> <OPTION>transition=6</OPTION> <OPTION>transition=7</OPTION> <OPTION>transition=8</OPTION> <OPTION>transition=9</OPTION> <OPTION>transition=10</OPTION> <OPTION>transition=11</OPTION> <OPTION>transition=12</OPTION> <OPTION>transition=13</OPTION> <OPTION>transition=14</OPTION> <OPTION>transition=15</OPTION> <OPTION>transition=16</OPTION> <OPTION>transition=17</OPTION> <OPTION>transition=18</OPTION> <OPTION>transition=19</OPTION> <OPTION>transition=20</OPTION> <OPTION>transition=21</OPTION> <OPTION>transition=22</OPTION> <OPTION>transition=23</OPTION></SELECT> }</STYLE>'); </FORM><SCRIPT>function setTrans(transType){for(var i=0 ; i<document.images.length ; i++)if(document.images[i].filters != null)document.images[i].filters[0].Transition = transType;}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->