一款响应式3D翻转定价表的特效，可以点击“每月”或“每年”来3D切换定价表的内容，默认中间一个定价表为选中状态，当然，也可以自行调整的，除了样式可以调整外，定价表的内容也是可以自由增加或删除的，喜欢的童鞋请直接收下吧。
关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。
页面的head部分需要先引入jQuery库文件，代码如下：
<script type="text/javascript" src="js/jquery.min.js"></script>接着设置好页面各元素的样式，样式代码较多，所以这里先贴出部分代码：
body {
font-size: 1.6rem;
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
color: #2d3d4f;
background-color: #1bbc9d;
}
a {
text-decoration: none;
}
.pricing-container {
width: 90%;
max-width: 1170px;
margin: 4em auto;
}
.pricing-container {
margin: 6em auto;
}
.pricing-container.full-width {
width: 100%;
max-width: none;
}
.pricing-switcher {
text-align: center;
}
.pricing-switcher .fieldset {
display: inline-block;
position: relative;
padding: 2px;
border-radius: 50em;
border: 2px solid #2d3e50;
}
.pricing-switcher input[type="radio"] {
position: absolute;
opacity: 0;
}
.pricing-switcher label {
position: relative;
z-index: 1;
display: inline-block;
float: left;
width: 90px;
height: 40px;
line-height: 40px;
cursor: pointer;
font-size: 1.4rem;
color: #ffffff;
}
.pricing-switcher .switch {
position: absolute;
top: 2px;
left: 2px;
height: 40px;
width: 90px;
background-color: #2d3e50;
border-radius: 50em;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
.pricing-switcher input[type="radio"]:checked + label + .switch,
.pricing-switcher input[type="radio"]:checked + label:nth-of-type(n) + .switch {
-webkit-transform: translateX(90px);
-moz-transform: translateX(90px);
-ms-transform: translateX(90px);
-o-transform: translateX(90px);
transform: translateX(90px);
}
.no-js .pricing-switcher {
display: none;
}
.pricing-list {
margin: 2em 0 0;
}
.pricing-list > li {
position: relative;
margin-bottom: 1em;
}页面的body部分先引入modernizr.min.js，然后设置好页面元素的容器，代码如下：
<body>
<script type="text/javascript" src="js/modernizr.min.js"></script>
<div class="pricing-container">
<div class="pricing-switcher">
<p class="fieldset">
<input type="radio" name="duration-1" value="monthly" id="monthly-1" checked>
<label for="monthly-1">每月</label>
<input type="radio" name="duration-1" value="yearly" id="yearly-1">
<label for="yearly-1">每年</label>
<span class="switch"></span>
</p>
</div>
<ul class="pricing-list bounce-invert">
<li>
<ul class="pricing-wrapper">
<li data-type="monthly" class="is-visible">
<header class="pricing-header">
<h2>标准版</h2>
<div class="price">
<span class="currency">¥</span>
<span class="value">30</span>
<span class="duration">月</span>
</div>
</header>
<div class="pricing-body">
<ul class="pricing-features">
<li><em>5</em> 邮箱账户</li>
<li><em>1</em> 模板样式</li>
<li><em>25</em> 产品加载</li>
<li><em>1</em> 图片/产品</li>
<li><em>无限</em> 带宽</li>
<li><em>24/7</em> 服务支持</li>
</ul>
</div>
<footer class="pricing-footer">
<a class="select" href="#">立即注册</a>
</footer>
</li>
<li data-type="yearly" class="is-hidden">
<header class="pricing-header">
<h2>标准版</h2>
<div class="price">
<span class="currency">¥</span>
<span class="value">320</span>
<span class="duration">年</span>
</div>
</header>
<div class="pricing-body">
<ul class="pricing-features">
<li><em>5</em> 邮箱账户</li>
<li><em>1</em> 模板样式</li>
<li><em>25</em> 产品加载</li>
<li><em>1</em> 图片/产品</li>
<li><em>无限</em> 带宽</li>
<li><em>24/7</em> 服务支持</li>
</ul>
</div>
<footer class="pricing-footer">
<a class="select" href="#">立即注册</a>
</footer>
</li>
</ul>
</li>
<li class="exclusive">
<ul class="pricing-wrapper">
<li data-type="monthly" class="is-visible">
<header class="pricing-header">
<h2>高级版</h2>
<div class="price">
<span class="currency">¥</span>
<span class="value">60</span>
<span class="duration">月</span>
</div>
</header>
<div class="pricing-body">
<ul class="pricing-features">
<li><em>15</em> 邮箱账户</li>
<li><em>3</em> 模板样式</li>
<li><em>40</em> 产品加载</li>
<li><em>7</em> 图片/产品</li>
<li><em>无限</em> 带宽</li>
<li><em>24/7</em> 服务支持</li>
</ul>
</div>
<footer class="pricing-footer">
<a class="select" href="#">立即注册</a>
</footer>
</li>
<li data-type="yearly" class="is-hidden">
<header class="pricing-header">
<h2>高级版</h2>
<div class="price">
<span class="currency">¥</span>
<span class="value">630</span>
<span class="duration">年</span>
</div>
</header>
<div class="pricing-body">
<ul class="pricing-features">
<li><em>15</em> 邮箱账户</li>
<li><em>3</em> 模板样式</li>
<li><em>40</em> 产品加载</li>
<li><em>7</em> 图片/产品</li>
<li><em>无限</em> 带宽</li>
<li><em>24/7</em> 服务支持</li>
</ul>
</div>
<footer class="pricing-footer">
<a class="select" href="#">立即注册</a>
</footer>
</li>
</ul>
</li>
<li>
<ul class="pricing-wrapper">
<li data-type="monthly" class="is-visible">
<header class="pricing-header">
<h2>专业版</h2>
<div class="price">
<span class="currency">¥</span>
<span class="value">90</span>
<span class="duration">月</span>
</div>
</header>
<div class="pricing-body">
<ul class="pricing-features">
<li><em>20</em> 邮箱账户</li>
<li><em>5</em> 模板样式</li>
<li><em>50</em> 产品加载</li>
<li><em>10</em> 图片/产品</li>
<li><em>无限</em> 带宽</li>
<li><em>24/7</em> 服务支持</li>
</ul>
</div>
<footer class="pricing-footer">
<a class="select" href="#">立即注册</a>
</footer>
</li>
<li data-type="yearly" class="is-hidden">
<header class="pricing-header">
<h2>专业版</h2>
<div class="price">
<span class="currency">¥</span>
<span class="value">950</span>
<span class="duration">年</span>
</div>
</header>
<div class="pricing-body">
<ul class="pricing-features">
<li><em>20</em> 邮箱账户</li>
<li><em>5</em> 模板样式</li>
<li><em>50</em> 产品加载</li>
<li><em>10</em> 图片/产品</li>
<li><em>无限</em> 带宽</li>
<li><em>24/7</em> 服务支持</li>
</ul>
</div>
<footer class="pricing-footer">
<a class="select" href="#">立即注册</a>
</footer>
</li>
</ul>
</li>
</ul>
</div>
</body>页面的底部通过javascript设置好各类事件的触发响应，部分代码如下：
function bouncy_filter(container) {
container.each(function(){
var pricing_table = $(this);
var filter_list_container = pricing_table.children('.pricing-switcher'),
filter_radios = filter_list_container.find('input[type="radio"]'),
pricing_table_wrapper = pricing_table.find('.pricing-wrapper');
//store pricing table items
var table_elements = {};
filter_radios.each(function(){
var filter_type = $(this).val();
table_elements[filter_type] = pricing_table_wrapper.find('li[data-type="'+filter_type+'"]');
});
//detect input change event
filter_radios.on('change', function(event){
event.preventDefault();
//detect which radio input item was checked
var selected_filter = $(event.target).val();
//give higher z-index to the pricing table items selected by the radio input
show_selected_items(table_elements[selected_filter]);
//rotate each pricing-wrapper
//at the end of the animation hide the not-selected pricing tables and rotate back the .pricing-wrapper
if( !Modernizr.cssanimations ) {
hide_not_selected_items(table_elements, selected_filter);
pricing_table_wrapper.removeClass('is-switched');
} else {
pricing_table_wrapper.addClass('is-switched').eq(0).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
hide_not_selected_items(table_elements, selected_filter);
pricing_table_wrapper.removeClass('is-switched');
//change rotation direction if .pricing-list has the .bounce-invert class
if(pricing_table.find('.pricing-list').hasClass('bounce-invert')) pricing_table_wrapper.toggleClass('reverse-animation');
});
}
});
});
}
系统已开启自动识别垃圾评论机制，识别到的自动封号，下载出错或者资源有问题请联系全栈客服QQ 1915635791