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

, , , , ,
01/06/2016    任刚    小贴士

任刚 不会代码的吉他手不是好的设计师

分享一个JQuery缩放菜单代码,当鼠标向下滚动的时候,菜单缩小,当回滚到顶部的时候,菜单恢复放大。后附演示实例,任刚(rengang.org)整理分享:

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.rengang.org/"><img src="images/logo.png" alt="logo"></a></h1>
    <ul class="nav">
      <li><a href="http://www.rengang.org/category/material/free-template">免费模板</a></li>
      <li><a href="http://www.rengang.org/category/material/web-elements">网页素材</a></li>
      <li><a href="http://www.rengang.org/category/material/ui-elements">UI素材</a></li>
      <li><a href="http://www.rengang.org/category/material/free-icons">免费图标</a></li>
      <li><a href="http://www.rengang.org/category/material/vector-graphics">矢量图形</a></li>
      <li><a href="http://www.rengang.org/category/material/fonts-element">字体素材</a></li>
    </ul>
  </div>
</div>
<div class="section">
  <p style="margin-top: 300px; text-align: center; color: #f50;">翻滚吧,牛宝宝!↓</p>
</div>

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>

「真诚赞赏,手留余香」

任刚 rengang.org

赞助用于本站维护,手机长按识别二维码。

任刚(rengang.org)整理分享,欣赏作品版权均归原作者所有,仅供学习交流。点击上方图标与好友分享!


发表评论

登 录 注 册