»
Tiếng AnhTiếng PhápTiếng Việt

In - Liên kết di chuyển từ dưới lên - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Liên kết » Liên kết di chuyển từ dưới lên
URL: https://www.javascriptbank.com/climbing-links.html

Liên kết di chuyển từ dưới lên © JavaScriptBank.comHiệu ứng tạo ra các liên kết di chuyển theo hướng từ dưới lên trong một khung. Nhìn sơ qua thì thấy hiệu ứng JavaScript này giống như là một marquee, tuy nhiên nó cao cấp hơn nhiều.

Phiên bản đầy đủ: jsB@nk » Liên kết » Liên kết di chuyển từ dưới lên
URL: https://www.javascriptbank.com/climbing-links.html



CSS
<style>.links{font-family:Arial;text-align:left;background-color:'red';position:relative;width:120;text-indent:5;}.divs{top:0;left:0;background-color:'red';position:absolute;width:120;z-index:1}.linksdiv{top:0;left:0;background-color:'red';position:absolute;width:120;z-index:0}A:link{font-size:10pt;color:black;text-decoration:none;font-weigth:'bolder';}A:visited{font-size:10pt;color:black;text-decoration:none;font-weigth:'bolder';}A:active{font-size:10pt;color:black;text-decoration:none;font-weigth:'bolder';}</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script language="JScript"><!--//place your links here (as many as you want)var links=new Array();links[0]="JavaScript Source"links[1]="JavaScript Tips"links[2]="Home"links[3]="JavaScripts"//set the urls of the links herevar urls=new Array();urls[0]="http://JavaScriptBank.com/";urls[1]="http://JavaScriptBank.com/";urls[2]="http://JavaScriptBank.com/";urls[3]="http://JavaScriptBank.com/";//set the speed of the linksvar intBannerSpeed=1;function Start_Climbing() {Set_DivPositions();  Arrange_Links();//call Climb() function every 50 miliseconds     action = window.setInterval("Climb()",50);}function Set_DivPositions(){//set the position where the links start disappearingdocument.all.TopDiv.style.pixelHeight=screen.availHeight*3/10;document.all.MiddleDiv.style.pixelTop=screen.availHeight*3/10;//set the height of the area where the links displayeddocument.all.MiddleDiv.style.pixelHeight=screen.availHeight*1/10;//set the position where the links start appearingdocument.all.BottomDiv.style.pixelTop = document.all.TopDiv.style.pixelHeight + document.all.MiddleDiv.style.pixelHeight;document.all.BottomDiv.style.pixelHeight = screen.availHeight*4/10;document.all.LinksDiv.style.pixelTop = document.all.BottomDiv.style.pixelTop;}function Arrange_Links(){//for each link create a divstrLinks= "<DIV class='links' > ";for (intArrayCell=0; intArrayCell<links.length; intArrayCell++){strLinks +=  "<A HREF=" + urls[intArrayCell] + " onmouseover='Change_Color(this)' onmouseout='Change_Color(this)' >";strLinks +=  links[intArrayCell];strLinks += "</A></DIV>"if (intArrayCell+1==links.length)break;elsestrLinks += "<DIV class='links'  >";}strLinks +="</A></DIV>";//place all the divs inside LinksDiv div (see bottom of the page)document.all.LinksDiv.innerHTML=strLinks;}function Change_Color(objLink){if(objLink.style.color=="white")objLink.style.color="black";elseobjLink.style.color="white";}function Climb() {    //every time this function is called reduce the top position of the LinksDiv by intBannerSpeeddocument.all.LinksDiv.style.pixelTop -= intBannerSpeed;//check if LinksDiv has reached the position where the last link has disappeared//if so start all over againif (document.all.LinksDiv.style.pixelTop<=document.all.TopDiv.style.pixelHeight - document.all.LinksDiv.offsetHeight) {window.clearInterval(action);Start_Climbing()    }}--></script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<body onload="Start_Climbing()"><div id="TopDiv" class="divs"></div><div id="MiddleDiv" class="linksdiv"></div><div id="BottomDiv" class="divs"></div><div id="LinksDiv" class="linksdiv"></div></body><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->