Menu Zoom – JQuery鼠标滚动缩放菜单特效代码

猜您喜欢

Menu Zoom – JQuery鼠标滚动缩放菜单特效代码

演示地址

特效说明

JQuery缩放菜单代码,当鼠标向下滚动的时候,菜单缩小,当回滚到顶部的时候,菜单恢复放大。页面很常见的一种效果!

浏览器兼容

ie.pngedge.pngchrome.pngfirefox.pngopera.pngSafari
IE9+EageChromeFirefoxOperaSafari

下面看代码:

CSS代码:

* {
	margin: 0;
	padding: 0;
}
.menu .header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	background-color: #323436;
}
.menu .inner {
	width: 1000px;
	margin: 0 auto;
	overflow: hidden;
	zoom: 1;
}
.menu h1 {
	float: left;
}
.menu h1 img {
	display: block;
	border: 0;
}
.menu .nav {
	float: right;
	list-style-type: none;
	font-family: "Microsoft Yahei";
}
.menu .nav li {
	float: left;
	margin-left: 5px;
}
.menu .nav a {
	float: left;
	color: #cecece;
	text-decoration: none;
}
.menu .nav a:hover {
	background-color: #555;
}
.menu .large .inner {
	padding: 20px 0;
}
.menu .large h1 img {
	height: 64px;
}
.menu .large .nav {
	padding-top: 10px;
}
.menu .large .nav a {
	height: 44px;
	padding: 0 20px;
	line-height: 44px;
	font-size: 18px;
}
.menu .small .inner {
	padding: 10px 0;
}
.menu .small h1 img {
	height: 34px;
}
.menu .small .nav {
	padding-top: 3px;
}
.menu .small .nav a {
	height: 28px;
	padding: 0 10px;
	line-height: 28px;
	font-size: 14px;
}
.menu .header, .menu .inner, .menu a, .menu img, .menu li {
	transition: all 1s;
	-moz-transition: all 1s;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
}
.section {
	height: 1000px;
}

HTML代码:

<body class="menu">
    <div class="header large">
      <div class="inner">
         <h1><a href="http://www.helloweb.wang/">HelloWeb.wang</a></h1>
         <ul class="nav">
          <li><a href="http://www.helloweb.wang/">首页</a></li>
          <li><a href="http://helloweb.wang/qianduankaifa/">前端开发</a></li>
          <li><a href="http://helloweb.wang/ui/">UI设计</a></li>
          <li><a href="http://helloweb.wang/jingyan/">经验/技巧</a></li>
          <li><a href="http://helloweb.wang/ziyuangongxiang/">资源共享</a></li>
          <li><a href="http://helloweb.wang/guanyubenzhan/host/">网站空间</a></li>
        </ul>
      </div>
    </div>
    <div class="section">
      <p style="margin-top: 300px; text-align: center; color: #f50;">试着往下拉,看看效果!↓</p>
    </div>
</body>

JS代码:

<script src="http://www.rengang.org/js/jquery-2.1.3.js"></script>
<script>
$(function(){
	$(window).on('scroll', function(){
		if($(window).scrollTop() > 100){
			$('.header').removeClass('large').addClass('small');
		}else{
			$('.header').removeClass('small').addClass('large');
		}
	});
});
</script>


原文链接:HelloWeb前端网 » Menu Zoom – JQuery鼠标滚动缩放菜单特效代码 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享