响应式3D翻转定价表-聚优部落

响应式3D翻转定价表

添加时间：2021-03-05 21:32:33

站长推荐丨赞助论坛，可获取海量资源终身免费下载权限奥!

赞助一下

预览

当前位置：

前端特效

选项卡/滑动门

一款响应式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');
					});
				}
			});
		});
	}

响应式3D翻转定价表

页面的head部分需要先引入jQuery库文件，代码如下：

接着设置好页面各元素的样式，样式代码较多，所以这里先贴出部分代码：

页面的body部分先引入modernizr.min.js，然后设置好页面元素的容器，代码如下：

页面的底部通过javascript设置好各类事件的触发响应，部分代码如下：

上一篇：大气jQuery鼠标悬停选项卡切换代码

下一篇：jQuery上下翻动轮播公告

响应式3D翻转定价表

页面的head部分需要先引入jQuery库文件，代码如下：

接着设置好页面各元素的样式，样式代码较多，所以这里先贴出部分代码：

页面的body部分先引入modernizr.min.js，然后设置好页面元素的容器，代码如下：

页面的底部通过javascript设置好各类事件的触发响应，部分代码如下：

上一篇：大气jQuery鼠标悬停选项卡切换代码

下一篇：jQuery上下翻动轮播公告

回帖

内容举报

举报类型：

说明：

附件下载

下载验证：

附件：

发帖找资源

回帖

会员登陆