[awei研究室]利用錨點連結滑動效果JQUERY

/ 分類: , / 0 則回應

標籤: ,

當文章內容很多，捲軸一直向下拉，拉到最下面後，又要用滑鼠將捲軸拉上
雖然現在滑鼠都有滾輪的幫助，但是一個好的UI介面來說以錨點的方式，能夠方便快速的找到主題
而錨點與超連結是密不可分的。

範例一是直式捲軸加上 go Top 的鈕，按下去可以自動的把網頁捲軸移動到最上面

但是單純的點連結已經無法滿足我們了~~於是我們可以用 jQuery 來達到移動捲軸的效果，那有什麼方法能不靠程式而移動呢？答案就是錨點(Anchor)。
jquery_s1

jquery_s2

watchbotton

另外可利用scrollLeft() 函式，能把捲軸移動到橫向的指定位置。
範例二 我試著用橫向卷軸演出小雞的故事~~~有如故事般向右滑動的動畫
當然各位可以發揮更多巧思與創意.^^

watchbotton
dwnbotton

 

jQuery 已經把控制捲軸的部份包裝成 .scrollTop() 及 .scrollLeft() 兩函式，它們能把捲軸移動到指定的位置。
再加上一點滑動的動畫可以讓畫面不至於單調。所以接下來咱們就改用.animate() 的方式來做出動畫式的移動吧：
使用 jQuery 語法產生動態的效果

jQuery 直式捲軸滑動錨點語法說明

<script language="javascript">
$(function(){
$("#goTop").click(function(){

$("html,body").animate({scrollTop:0},900);

//$("html,body").animate({scrollTop:0},900,"easeOutBounce");

return false;

});

});

1.網頁下面的 go top 連結在 HTML 內使用 id 命名為 goTop ，所以在 jQuery 要寫成 $(“#goTop”)
2.$(“html,body”) 主要可控製整個網頁畫面，指令 animate( ) 就是用來做動畫效果的，屬性 scrollTop 可以控製捲軸的位置
3.return false 讓原本的 HTML 超連結失去效果，讓他專心做我們寫的 jQuery 效果。

jQuery橫向卷軸滑動錨點語法說明

<script language="javascript">
$(function(){
	
	$('a.gn1').click(function(){
		var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
		$body.animate({
			scrollLeft: 1300
		}, 1500, 'easeInOutExpo');
 
		return false;
	});

	$('a.gn2').click(function(){
		var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
		$body.animate({
			scrollLeft: 2850
		}, 1500, 'easeInOutExpo');
 
		return false;
	});
	$('a.gn3').click(function(){
		var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
		$body.animate({
			scrollLeft: 4520
		}, 1500, 'easeInOutExpo');
 
		return false;
	});
		$('a.gn0').click(function(){
		var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
		$body.animate({
			scrollLeft: 0
		}, 3000, 'easeInOutExpo');
 
		return false;
	});
});
// ]]></script>

發表留言