« »

Hiệ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.

Nhãn: Liên kết di chuyển từ dưới lên

Báo cho chúng tôi lỗi JavaScript này

Demo
Phóng to
Tải lại
Cửa sổ mới

Mã nguồn
CSS
JavaScript
HTML
In

Copy All x2

<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
	-->

Copy All x2

<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 here
var 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 links
var 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 disappearing
	document.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 displayed
	document.all.MiddleDiv.style.pixelHeight=screen.availHeight*1/10;
	//set the position where the links start appearing	
	document.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 div
	strLinks= "<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;
		else
			strLinks += "<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";
	else
		objLink.style.color="white";
}
function Climb() {
    	
	//every time this function is called reduce the top position of the LinksDiv by intBannerSpeed
	document.all.LinksDiv.style.pixelTop -= intBannerSpeed;
	//check if LinksDiv has reached the position where the last link has disappeared
	//if so start all over again
	if (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
	-->

Copy All x2

<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
	-->