jQuery个人主页相册图片导航菜单支持上下滚动的图片菜单栏



102 404 135



特效描述:主页相册导航 上下滚动 图片菜单栏,

代码结构

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

加群请备注:从官网了解到