以下是 jQuery底部弹出缩略图导航菜单js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery�ײ���������ͼ�����˵�</title>
<link rel="stylesheet" href="css/zzsc.css" type="text/css" media="screen"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<base target="_blank" />
</head>
<body>
<!-- ���� ��ʼ -->
<div class="content">
<ul class="menu" id="menu">
<li>
<a href="#">Brand 1</a>
<div class="sc_menu_wrapper">
<div class="sc_menu">
<a href="#"><img src="images/1.jpg" alt=""/></a>
<a href="#"><img src="images/2.jpg" alt=""/></a>
<a href="#"><img src="images/3.jpg" alt=""/></a>
<a href="#"><img src="images/1.jpg" alt=""/></a>
<a href="#"><img src="images/2.jpg" alt=""/></a>
<a href="#"><img src="images/3.jpg" alt=""/></a>
<a href="#"><img src="images/1.jpg" alt=""/></a>
<a href="#"><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="#"><img src="images/4.jpg" alt=""/></a>
<a href="#"><img src="images/5.jpg" alt=""/></a>
<a href="#"><img src="images/6.jpg" alt=""/></a>
<a href="#"><img src="images/1.jpg" alt=""/></a>
<a href="#"><img src="images/2.jpg" alt=""/></a>
<a href="#"><img src="images/1.jpg" alt=""/></a>
<a href="#"><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="#"><img src="images/7.jpg" alt=""/></a>
<a href="#"><img src="images/8.jpg" alt=""/></a>
<a href="#"><img src="images/9.jpg" alt=""/></a>
<a href="#"><img src="images/10.jpg" alt=""/></a>
<a href="#"><img src="images/7.jpg" alt=""/></a>
<a href="#"><img src="images/8.jpg" alt=""/></a>
<a href="#"><img src="images/9.jpg" alt=""/></a>
<a href="#"><img src="images/10.jpg" alt=""/></a>
<a href="#"><img src="images/7.jpg" alt=""/></a>
<a href="#"><img src="images/8.jpg" alt=""/></a>
<a href="#"><img src="images/9.jpg" alt=""/></a>
<a href="#"><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="#"><img src="images/4.jpg" alt=""/></a>
<a href="#"><img src="images/5.jpg" alt=""/></a>
<a href="#"><img src="images/6.jpg" alt=""/></a>
<a href="#"><img src="images/1.jpg" alt=""/></a>
<a href="#"><img src="images/2.jpg" alt=""/></a>
<a href="#"><img src="images/3.jpg" alt=""/></a>
<a href="#"><img src="images/1.jpg" alt=""/></a>
<a href="#"><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="#"><img src="images/4.jpg" alt=""/></a>
<a href="#"><img src="images/5.jpg" alt=""/></a>
<a href="#"><img src="images/6.jpg" alt=""/></a>
<a href="#"><img src="images/1.jpg" alt=""/></a>
<a href="#"><img src="images/2.jpg" alt=""/></a>
<a href="#"><img src="images/3.jpg" alt=""/></a>
<a href="#"><img src="images/4.jpg" alt=""/></a>
<a href="#"><img src="images/5.jpg" alt=""/></a>
<a href="#"><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>
<!-- ���� ���� -->
</body>
</html>
CSS代码(zzsc.css):
body{overflow:hidden;}
/* Navigation Style */
ul.menu{list-style:none;font-family:"Trebuchet MS",Arial,sans-serif;;font-size:15px;font-style:normal;font-weight:normal;text-transform:uppercase;letter-spacing:normal;line-height:1.45em;position:fixed;bottom:0px;left:0px;width:700px;height:100%;}
ul.menu li{float:left;position:relative;height:100%;width:130px;}
ul.menu li > a{position:absolute;bottom:0px;left:0px;width:130px;height:40px;text-align:center;line-height:40px;color:#ddd;background-color:#291A2F;letter-spacing:1px;cursor:pointer;text-decoration:none;text-shadow:0px 0px 1px #fff;-moz-box-shadow:-1px 0px 5px #000;-webkit-box-shadow:-1px 0px 5px #000;box-shadow:-1px 0px 5px #000;opacity:0.9;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);}
/* Thumb Scrolling Style */
div.sc_menu_wrapper{position:absolute;top:0px;width:150px;overflow:hidden;bottom:0px;left:0px;visibility:hidden;}
div.sc_menu{width:130px;visibility:hidden;}
.sc_menu a{display:block;background-color:#22002F;color:#fff;text-align:center;-moz-box-shadow:3px -3px 3px #3B0F4F;box-shadow:3px -3px 3px #3B0F4F;-webkit-box-shadow:3px -3px 3px #3B0F4F;}
.sc_menu img{display:block;border:none;opacity:0.3;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);}
*{margin:0;padding:0;}
body{font-family:Arial;padding:0px;margin:0px;}
分享到QQ
分享到微博
微信扫一扫
