[awei研究室]Css & jquery 水平滑動特效(滑鼠偵測)

/ 分類: , / 0 則回應

標籤: , ,

Css & jquery 水平滑動特效(滑鼠偵測)

這次我們試著作出一個當滑鼠移動到指定區塊(teaser)時,啟動讓上層圖片向左滑動
並顯現下方區塊文字與底圖
可應用於利用滑鼠翻牌以便顯示底下的資訊

看範例

movewap_s1

首先我們把整個DIV區塊Wrapper包含兩個content1與content2
並且teaser區塊與兩個content作重疊

這時我們準備兩張圖片
1.上層圖片joker.jpg
2.底層背景圖jokerbg.jpg

movewap_s2

這時加入此段javascript

<script type="text/javascript" charset="utf-8">
$('.teaser').hover(function() {
	  // over

	$(this).children('img').stop().animate({
		left : '-590px'
	}, 500);

}, 
function() {
  // out	

	$(this).children('img').stop().animate({
		left : '0'
	}, 500);

});
	$(document).ready(function () {
		// transition effect
		style = 'easeOutQuart';
		// if the mouse hover the image
		$('.lanrenzhijia').hover(
			function() {
				//display heading and caption
				$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
				$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
			},
			function() {
				//hide heading and caption
				$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
				$(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
			}
		);
/*	2nd example	*/			
			$("#menumeno2 li a").wrapInner( '<span class="out"></span>' );
			$("#menumeno2 li a").each(function() {
				$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
			});
			$("#menumeno2 li a").hover(function() {
				$(".out",	this).stop().animate({'top':	'45px'},	200); // move down - hide
				$(".over",	this).stop().animate({'top':	'0px'},		200); // move down - show

			}, function() {
				$(".out",	this).stop().animate({'top':	'0px'},		200); // move up - show
				$(".over",	this).stop().animate({'top':	'-45px'},	200); // move up - hide
			});
	});
</script>

當滑鼠移動到teaser區塊時,就會觸發動畫使上方圖片水平向左移動
並且使底下區塊顯示出來

完整範例下載

發表留言