www.www.zaachi.com »  Blog/JavaScript  »  JQuery: Examples 2 - Animate ScrollBar

JQuery: Examples 2 - Animate ScrollBar



JavasScriptem ovládaný ScrollBar divu pomocí knihovny jQuery

 

Reklama
Pokud mě chcete podpořit a jste milovník jedné stopy, navštivte můj projekt: MotoArena.cz

V příkladu je vytvořen div, který má nastavenu vlastnost overflow: auto a je jím tedy možné srolovat. Div obsahuje text, ve kterém nám jQuery umožní lepší orientaci. Pro pochopení si můžete prohlídnout ukázku:

jquery example

Text je členěn na nadpisy H1 a navíc obsahuje obrázky. Pomocí jQuery zjistíme všechny tyto elementy zobrazíme jejich seznam, ve kterém budeme na elementy v divu odkazovat a umožňovat k nim srolovat.

Div, ve kterém je umístěn text má ID scrollDiv. Seznam všech nadpisů H1 z něj získáme jednoduše takto: 

var i = 0; 
for( i = 0; i < $("#scrollDiv h1").length; i++ ){
	//práce s nadpisem
}

V cyklu k nadpisu můžeme přistupovat pomocí: 

$("#scrollDiv h1").eq(i).html();

V tomto ukázkovém příkladu potřebujeme kromě nadpisů získat i seznam obrázků. To uděláme podobně, jenom pro tag img.

 

Pokud máme seznam všech odkazů a obrázků, budeme pokračovat přidáním eventu pro kliknutí a nabídnutí tak možnosti srolování.

V první řádě musíme zjistit offset divu s textem, ve kterém srolujeme a offset nadpisu (nebo obrázku), ke kterému chceme srolovat (pro rozlišení pozice je použita hodnota z atributu name. V tomto atributu je uloženo číslo identifikující pozici elementu): 

var divOffset = $('#scrollDiv').offset().top;
var elementOffset = $("#scrollDiv h1").eq($(this).attr("name") ).offset().top;

Pokud známe obě tyto hodnoty, můžeme konečně animovat samotné srolování: 

$('#scrollDiv').animate({scrollTop: '+=' + (elementOffset - divOffset) + 'px'}, 700);

 

Pro lepší pochopení si můžete prohlídnout celý zdrojový kód: 

<html>
<head>
<script src="jquery.js"></script>
  
<script type="text/javascript">
$(document).ready(function(){
	var i = 0; 
	//nacteni vsech H1 nadpisu
	for( i = 0; i < $("#scrollDiv h1").length; i++ ){
		//pridani nadpisu do leveho divu
		$("#titleDiv").append( "<a href='#' name='" + i + "' onclick='return false;'>" + $("#scrollDiv h1").eq(i).html() + "</a><br />");
	}
	$("#titleDiv").append('<br /><br />');
	
	//nacteni vsech obrazku
	for( i = 0; i < $("#scrollDiv img").length; i++ ){
		//pridani obrazku do leveho divu
		$("#titleDiv").append( "<img src='" + $("#scrollDiv img").eq(i).attr("src") + "' name='" + i + "' width='50px' /> ");
		if( i%2 )
			$("#titleDiv").append('<br />');
	}
	
	//event na odkaz v levem divu
	$("#titleDiv a").click(function(){
		//zjisteni pozice zobrazovaneho nadpisu
		var elementOffset = $("#scrollDiv h1").eq($(this).attr("name") ).offset().top;
		//zjisteni pozice divu s textem
		var divOffset = $('#scrollDiv').offset().top;
		//odrolovani
		$('#scrollDiv').animate({scrollTop: '+=' + (elementOffset - divOffset) + 'px'}, 700);
		
		//efekt odkazu
		$(this).fadeTo(500, 0.1, function (){
			$(this).css('color', 'lightGreen');
			$(this).fadeTo(500, 1);
		});
	});
	
	//event na obrazek v levem divu # podobne jako odkaz
	$("#titleDiv img").click(function (){
		//zjisteni pozice zobrazovaneho nadpisu
		var elementOffset = $("#scrollDiv img").eq($(this).attr("name") ).offset().top;
		//zjisteni pozice divu s textem
		var divOffset = $('#scrollDiv').offset().top;
		//odrolovani na obrazek
		$('#scrollDiv').animate({scrollTop: '+=' + (elementOffset - divOffset) + 'px'}, 700);
		
		//efekt obrazku 
		$(this).fadeTo(500, 0.5, function (){
			$(this).fadeTo(500, 1);
		});
	});
});

</script>


<style>
h1{
	color: #191970; 
	font-size: 20px;
}
#scrollDiv{
	background-color: #f5f5f5; 
	overflow: auto; 
	height: 450px; 
	width: 500; 
	border: 1px solid black; 
	padding: 5px; 
	margin: 5px; 
}
a{
	color: #556b2f;
	text-decoration: none;
	font-weight: normal; 
}

table{
	border: 4px solid silver; 
	padding: 10px; 
	margin: 10px;
}
td{
	padding: 10px; 
}

</style>
</head>
<body>
<table>
    <tr>

        <td valign="top">
            <div id="titleDiv"></div>
        </td>
        <td>
            <div id="scrollDiv">

                <h1>heading 1</h1>
                <p> paragraph ...</p>
                <h1>heading 2</h1>
                <p> paragraph ...</p>

                <h1>heading 3</h1>
                <p> paragraph ...</p>
                <h1>heading 4</h1>
                <p> paragraph ...</p>

                <h1>heading 5</h1>
                <p> paragraph ...</p>
                <h1>heading 6</h1>
                <p> paragraph ...</p>

                <h1>heading 7</h1>
                <p> paragraph ...</p>
                <h1>heading 8</h1>
                <p> paragraph ...</p>

                <h1>heading 9</h1>
                <p> paragraph ...</p>
                <h1>heading 10</h1>
                <p> paragraph ...</p>

                <h1>heading 11</h1>
                <p> paragraph ...</p>
                <h1>heading 12</h1>
                <p> paragraph ...</p>

                <h1>heading 13</h1>
                <p> paragraph ...</p>
            </div>
        </td>

    </tr>
</table>

</body>
</html>

 

 


linkuj topclanky
Komentáře (6)

Autor: Zaachi
Publikováno: 7.1.2009 10:56:47


Mohlo by vás zajímat:
JQuery: Examples 1
jQuery: Examples 3 – Ajax
iPhone - presentModalViewController animate
TOPLIST.cz
rss coments img img img