<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery卡片堆叠展示导航菜单切换特效</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body><script src="/demos/googlegg.js"></script>
<article class="htmleaf-container">
<div class="demo">
<div class="demo__close-menu"></div>
<div class="demo__section demo__section-1" data-section="1">
<div class="demo__menu-btn"></div>
<h2 class="demo__section-heading">Contact</h2>
</div>
<div class="demo__section demo__section-2 active" data-section="2">
<div class="demo__menu-btn"></div>
<h2 class="demo__section-heading">About</h2>
</div>
<div class="demo__section demo__section-3 inactive" data-section="3">
<div class="demo__menu-btn"></div>
<h2 class="demo__section-heading">Team</h2>
</div>
<div class="demo__section demo__section-4 inactive" data-section="4">
<div class="demo__menu-btn"></div>
<h2 class="demo__section-heading">Projects</h2>
</div>
</div>
</article>
<script src='js/stopExecutionOnTimeout.js?t=1'></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var $demo = $('.demo');
var numOfSections = $('.demo__section').length;
$(document).on('click', '.demo__menu-btn', function () {
$demo.addClass('menu-active');
});
$(document).on('click', '.demo__close-menu', function () {
$demo.removeClass('menu-active');
});
$(document).on('click', '.demo.menu-active .demo__section', function () {
var $section = $(this);
var index = +$section.data('section');
$('.demo__section.active').removeClass('active');
$('.demo__section.inactive').removeClass('inactive');
$section.addClass('active');
$demo.removeClass('menu-active');
for (var i = index + 1; i <= numOfSections; i++) {
if (window.CP.shouldStopExecution(1)) {
break;
}
$('.demo__section[data-section=' + i + ']').addClass('inactive');
}
window.CP.exitedLoop(1);
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
jQuery卡片堆叠展示导航菜单切换特效.zip
版权申诉
51 浏览量
2023-09-23
09:57:26
上传
评论
收藏 39KB ZIP 举报
jQuery卡片堆叠展示导航菜单切换特效.zip （10个子文件） 
js 
stopExecutionOnTimeout.js 2KB jquery-2.1.1.min.js 82KB css default.css 6KB normalize.css 2KB styles.css 4KB
index.html 3KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5837
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
