<!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+CSS3堆叠式面板切换特效</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<ul class="tabs">
<li class="tabs__item color1">
<h2><span>脚本之家</span></h2>
<p class="tabs__num">9</p>
<p class="tabs__stats">
Height: 6-2, Weight: 230, College: Eastern Illinois
</p>
</li>
<li class="tabs__item color2">
<h2><span>脚本之家2</span></h2>
</h2>
<p class="tabs__num">12</p>
<p class="tabs__stats">
Height: 6-2, Weight: 225, College: California
</p>
</li>
<li class="tabs__item color3">
<h2><span>脚本之家3</span></h2>
<p class="tabs__num">7</p>
<p class="tabs__stats">
Height: 6-5, Weight: 241, College: Miami, OH
</p>
</li>
<li class="tabs__item color4">
<h2><span>脚本之家4</span></h2>
<p class="tabs__num">18</p>
<p class="tabs__stats">
Height: 6-5, Weight: 230, College: Tennessee
</p>
</li>
<li class="tabs__item color5">
<h2><span>脚本之家5</span></h2>
<p class="tabs__num">12</p>
<p class="tabs__stats">
Height: 6-4, Weight: 225, College: Michigan
</p>
</li>
<li class="tabs__item color6">
<h2><span>脚本之家6</span></h2>
<header class="htmleaf-header">
<h3>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</h3>
</header>
</li>
<div class="views-toggle views-toggle--hidden">
<svg fill="white" viewBox="0 0 24 24">
<path d="M16.59 8.59l-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z"/>
<path d="M0 0h24v24h-24z" fill="none"/>
</svg>
</div>
</ul>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
var Tabs = function () {
var toggler = $('.views-toggle');
var tabs = $('li.tabs__item');
var toggled = false;
var transform = function (el, value) {
el.css('transform', value);
el.css('-webkit-transform', value);
el.css('-ms-transform', value);
};
var transition = function (el, value) {
el.css('transition', value);
el.css('-webkit-transition', value);
el.css('-ms-transition', value);
};
var moveContent = function () {
if (!toggled) {
toggled = true;
} else {
toggled = false;
}
moveTabs(toggled);
return false;
};
var moveTabs = function (a) {
var transY, scale;
if (a) {
tabs.css({
'opacity': '1',
'box-shadow': '0 30px 60px rgba(0,0,0,0.4)',
'cursor': 'pointer'
});
tabs.each(function (index) {
transY = index * 10;
scale = 0.5 + index / 25;
transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
});
toggler.addClass('views-toggle--hidden');
} else {
transform(tabs, 'translate3d(0,0,0) scale(1)');
}
};
var switchTabs = function () {
var selected = $(this);
var others = selected.siblings('li');
if (toggled) {
transition(others, 'transform 0.3s cubic-bezier(0.755, 0.05, 0.855, 0.06)');
transform(others, 'translate3d(0, 100%, 0) scale(1)');
transform(selected, 'translate3d(0,0,0) scale(1)');
tabs.css({
'box-shadow': '0 30px 60px rgba(0,0,0,0.4)',
'cursor': 'default'
});
toggled = false;
selected.on('transitionend webkitTransitionend', function () {
toggler.removeClass('views-toggle--hidden');
others.css({ 'opacity': '0' });
transform(others, 'translate3d(0, 100%, 0) scale(0)');
transition(others, 'transform 0.9s cubic-bezier(0.23, 1, 0.32, 1)');
selected.off('transitionend webkitTransitionend');
});
}
};
var setup = function () {
toggled = true;
moveTabs(toggled);
};
var init = function () {
$(document).on('ready', setup);
toggler.on('click touchstart', moveContent);
tabs.on('click touchstart', switchTabs);
};
return { init: init };
}();
Tabs.init();
</script>
</body>
</html>
jQuery+CSS3实现的堆叠式面板切换特效源码.zip
版权申诉
194 浏览量
2022-11-06
23:42:53
上传
评论
收藏 42KB ZIP 举报
jQuery+CSS3实现的堆叠式面板切换特效源码.zip （8个子文件） 
132686917704521622 css 
default.css 6KB styles.css 24KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 4KB js jquery-2.1.1.min.js 82KB资源评论
