Phiên bản đầy đủ: jsB@nk » Trình đơn » Menu có ảnh trượt theo
URL: https://www.javascriptbank.com/gliding-rollovers-index.html
Hiệu ứng sẽ tạo một trình đơn có ảnh chạy theo con trỏ chuột mỗi khi người dùng rê con trỏ chuột đến một mục chọn nào đó.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Menu có ảnh trượt theo
URL: https://www.javascriptbank.com/gliding-rollovers-index.html
<style type="text/css"><!--body {/*background-color: #5D5765;*/}img {border: 0px;}.maintext {font-family: "Courier New", Courier, mono;font-size: 18px;color: #FFCC99;}a:link {font-family: "Courier New", Courier, mono;font-size: 14px;color: #FFFFFF;}a:visited {font-family: "Courier New", Courier, mono;font-size: 14px;color: #FFCC66;}--></style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript">// made by Eddie Traversa copyright 2004// free to use as long as this copyright notice stays intact. var timer1=null;// needed for xhtml dtds px = (document.getElementById) ? "px" : "";// use the offset variable to refine the pointers end position// setting it to 0 sees the pointer end at left position of element// so if we need to adjust it so that the pointer centers over text etc.. // then this is the variable to use;var offset = 15;// Controls the speed of the animationvar timerspeed = 25;// controls the number of step from point a to point b. higher numbers see a decrease in speedvar steps = 20;// controls the deceleration// dont recommend changing this var as this number seems to work well across all browsersvar decrease = 0.09; // gets the current position of the link;function getPosition(id) { if (document.getElementById) {endPos = document.getElementById(id).offsetLeft;}else if (document.layers) {endPos = document.layers[id].left;}}// shoves the pointer around the screen based on what current link is activated// to make a vertical one just change offsetLeft to offsetTop// and change any references to .left to .topfunction glideMenu(obj) {if (document.getElementById) {el = document.getElementById(obj).style ;}if (document.layers) {el = document.layers[obj] ;}el.xpos = parseInt(el.left);if (el.xpos < endPos) {clearTimeout(timer1);}else if (el.xpos >= endPos) {clearTimeout(timer1);}distance = endPos - el.xpos + offset;steps = distance*decrease; el.xpos += steps;el.left = el.xpos+px ;timer1= setTimeout("glideMenu('" + obj + "')",timerspeed);}// refresh the page on a window resize so ns4 doesnt screw the layers upwindow.onresize = function () {history.go(0);}</script><script language="JavaScript" type="text/JavaScript"><!--function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();}MM_reloadPage(true);//--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="link1" style="position: absolute; top: 44px; left: 162px; z-index: 3;"> <a href="#" onmouseover="getPosition('link1');glideMenu('pointer')"> <img src="button1.gif" width="95" height="25" border="0"></a> </div><div id="link2" style="position: absolute; top: 44px; left: 256px; z-index: 3;"> <a href="#" onmouseover="getPosition('link2');glideMenu('pointer')"><img src="button2.gif" width="95" height="25" border="0"></a> </div><div id="link3" style="position: absolute; top: 44px; left: 351px; z-index: 3;"><a href="#" onmouseover="getPosition('link3');glideMenu('pointer')"> <img src="button3.gif" width="95" height="25" border="0"> </a></div><div id="link4" style="position: absolute; top: 44px; left: 446px; z-index: 3;"><a href="#" onmouseover="getPosition('link4');glideMenu('pointer')"> <img src="button4.gif" width="95" height="25" border="0"> </a></div><div id="link5" style="position: absolute; top: 44px; left: 541px; z-index: 3;"><a href="#" onmouseover="getPosition('link5');glideMenu('pointer')"> <img src="button4.gif" width="95" height="25" border="0"> </a></div><div id="pointer" style="position: absolute; top: 27px; width: 130px; height: 30px; z-index: 2; left: 477.74px;"><img src="pointer_animated.gif" alt="" width="81" height="61" border="0"> </div><!-- 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/Gliding_Rollovers/Gliding_Rollovers_images.zip