jQuery個人主頁相冊圖片導航菜單支持上下滾動的圖片菜單欄



105 416 139



特效描述:主頁相冊導航 上下滾動 圖片菜單欄,

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

2. 引入JS

<script type="text/javascript" src="jquery.min.js"></script>

3. HTML代碼

<div class="content">
	<div class="model2"></div>
	<a href="http://www.flickr.com/photos/kk/3308533392/in/set-72157614644950989/" class="model1"></a>
	<a class="back" href="#"><< 時裝模特</a>
	<ul class="menu" id="menu">
		<li>
			<a href="#">Brand 1</a>
			<div class="sc_menu_wrapper">
				<div class="sc_menu">
					<a href="http://www.flickr.com/photos/kk/1464732409/in/set-72157602221334427/"><img src="images/1.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464786371/in/set-72157602221334427/"><img src="images/2.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464889255/in/set-72157602221334427/"><img src="images/3.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464732409/in/set-72157602221334427/"><img src="images/1.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464786371/in/set-72157602221334427/"><img src="images/2.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464889255/in/set-72157602221334427/"><img src="images/3.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464732409/in/set-72157602221334427/"><img src="images/1.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464786371/in/set-72157602221334427/"><img src="images/2.jpg" alt=""/></a>
				</div>
			</div>
		</li>
		<li>
			<a href="#">Brand 2</a>
			<div class="sc_menu_wrapper">
				<div class="sc_menu">
					<a href="http://www.flickr.com/photos/kk/1464993617/in/set-72157602221334427/"><img src="images/4.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1465836986/in/set-72157602221334427/"><img src="images/5.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1465609042/in/set-72157602221334427/"><img src="images/6.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464732409/in/set-72157602221334427/"><img src="images/1.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464786371/in/set-72157602221334427/"><img src="images/2.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464732409/in/set-72157602221334427/"><img src="images/1.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1465609042/in/set-72157602221334427/"><img src="images/6.jpg" alt=""/></a>
				</div>
			</div>
		</li>
		<li>
			<a href="#">Fashion 1</a>
			<div class="sc_menu_wrapper">
				<div class="sc_menu">
					<a href="http://www.flickr.com/photos/kk/1465859894/in/set-72157602221334427/"><img src="images/7.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1465016083/in/set-72157602221334427/"><img src="images/8.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464773835/in/set-72157602221334427/"><img src="images/9.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1465619152/in/set-72157602221334427/"><img src="images/10.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1465859894/in/set-72157602221334427/"><img src="images/7.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1465016083/in/set-72157602221334427/"><img src="images/8.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464773835/in/set-72157602221334427/"><img src="images/9.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1465619152/in/set-72157602221334427/"><img src="images/10.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1465859894/in/set-72157602221334427/"><img src="images/7.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1465016083/in/set-72157602221334427/"><img src="images/8.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464773835/in/set-72157602221334427/"><img src="images/9.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1465619152/in/set-72157602221334427/"><img src="images/10.jpg" alt=""/></a>
				</div>
			</div>
		</li>
		<li>
			<a href="#">Fashion 2</a>
			<div class="sc_menu_wrapper">
				<div class="sc_menu">
					<a href="http://www.flickr.com/photos/kk/1464993617/in/set-72157602221334427/"><img src="images/4.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1465836986/in/set-72157602221334427/"><img src="images/5.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1465609042/in/set-72157602221334427/"><img src="images/6.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464732409/in/set-72157602221334427/"><img src="images/1.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464786371/in/set-72157602221334427/"><img src="images/2.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464889255/in/set-72157602221334427/"><img src="images/3.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464732409/in/set-72157602221334427/"><img src="images/1.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464786371/in/set-72157602221334427/"><img src="images/2.jpg" alt=""/></a>
				</div>
			</div>
		</li>
		<li class="last">
			<a href="#">Fashion 3</a>
			<div class="sc_menu_wrapper">
				<div class="sc_menu">
					<a href="http://www.flickr.com/photos/kk/1464993617/in/set-72157602221334427/"><img src="images/4.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1465836986/in/set-72157602221334427/"><img src="images/5.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1465609042/in/set-72157602221334427/"><img src="images/6.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464732409/in/set-72157602221334427/"><img src="images/1.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464786371/in/set-72157602221334427/"><img src="images/2.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464889255/in/set-72157602221334427/"><img src="images/3.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1464993617/in/set-72157602221334427/"><img src="images/4.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1465836986/in/set-72157602221334427/"><img src="images/5.jpg" alt=""/></a>
					<a href="http://www.flickr.com/photos/kk/1465609042/in/set-72157602221334427/"><img src="images/6.jpg" alt=""/></a>
				</div>
			</div>
		</li>
	</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript">
$(function(){
	/* function to make the thumbs menu scrollable */
	function buildThumbs($elem){
		var $wrapper    	= $elem.next();
		var $menu 		= $wrapper.find('.sc_menu');
		var inactiveMargin 	= 150;
		/* move the scroll down to the
		beggining (move as much as the height of the menu) */
		$wrapper.scrollTop($menu.outerHeight());
		/* when moving the mouse up or down, the wrapper moves (scrolls) up or down */
		$wrapper.bind('mousemove',function(e){
			var wrapperHeight 	= $wrapper.height();
			var menuHeight 	= $menu.outerHeight() + 2 * inactiveMargin;
			var top 	= (e.pageY - $wrapper.offset().top) * (menuHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
			$wrapper.scrollTop(top+10);
		});
	}
	var stacktime;
	$('#menu li > a').bind('mouseover',function () {
		var $this = $(this);
		buildThumbs($this);
		var pos	=	$this.next().find('a').size();
		var f	=	function(){
			if(pos==0) clearTimeout(stacktime);
			$this.next().find('a:nth-child('+pos+')').css('visibility','visible');
			--pos;
		};
		/* each thumb will appear with a delay */
		stacktime = setInterval(f , 50);
	});
	/* on mouseleave of the whole <li> the scrollable area is hidden */
	$('#menu li').bind('mouseleave',function () {
		var $this = $(this);
		clearTimeout(stacktime);
		$this.find('.sc_menu').css('visibility','hidden').find('a').css('visibility','hidden');
		$this.find('.sc_menu_wrapper').css('visibility','hidden');
	});
	/* when hovering a thumb, change its opacity */
	$('.sc_menu a').hover(
	function () {
		var $this = $(this);
		$this.find('img')
		.stop()
		.animate({'opacity':'1.0'},400);
	},
	function () {
		var $this = $(this);
		$this.find('img')
		.stop()
		.animate({'opacity':'0.3'},400);
	}
);
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 自動滾動圖片輪播 圖片滾動 圖片滾動條
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子