表单/表格

jQuery和css3超酷价格表3D旋转特效

也想出现在这里?联系我们
创客云

这是一款 超酷 jQuery 和 css3 价格表 3d 旋转特效插件。在插件中设计了 3 种不同样式的价格表,还集成了 jQuery 和 css3 弹性 3d 图片翻转分组展示特效用于将价格表从一面旋转到另一面。在小屏幕上,我们使用另一种方案:将所有的价格表垂直排列,然后将价格表的内容水平排列,超出屏幕部分使用水平滚动条,这样,用户可以在同一个屏幕上比较 3 个表格的内容,利于用户体验。

HTML 结构:

html 结构包含两个部分:div.cd-pricing-switcher 包含用于过滤的按钮。ul.cd-pricing-list 包含价格表。在.cd-pricing-list 中的每一个列表项都嵌套一个二级的 ul 元素(用于旋转的那一面)。

也想出现在这里?联系我们
创客主机
  1. <div class="cd-pricing-container">
  2.   <div class="cd-pricing-switcher">
  3.     <p class="fieldset">
  4.       <input type="radio" name="duration" value="monthly" id="monthly" checked>
  5.       <label for="monthly">Monthly</label>
  6.       <input type="radio" name="duration" value="yearly" id="yearly">
  7.       <label for="yearly">Yearly</label>
  8.       <span class="cd-switch"></span>
  9.     </p>
  10.   </div> <!-- .cd-pricing-switcher -->
  11.  
  12.   <ul class="cd-pricing-list">
  13.     <li>
  14.       <ul class="cd-pricing-wrapper">
  15.         <li data-type="monthly" class="is-visible">
  16.           <header class="cd-pricing-header">
  17.             <h2>Basic</h2>
  18.             <div class="cd-price">
  19.               <span class="cd-currency">$</span>
  20.               <span class="cd-value">30</span>
  21.               <span class="cd-duration">mo</span>
  22.             </div>
  23.           </header> <!-- .cd-pricing-header -->
  24.  
  25.           <div class="cd-pricing-body">
  26.             <ul class="cd-pricing-features">
  27.               <li><em>256MB</em> Memory</li>
  28.               <!-- other features here -->
  29.             </ul>
  30.           </div> <!-- .cd-pricing-body -->
  31.  
  32.           <footer class="cd-pricing-footer">
  33.             <a class="cd-select" href="http://www.htmleaf.com/">Select</a>
  34.           </footer> <!-- .cd-pricing-footer -->
  35.         </li>
  36.  
  37.         <li data-type="yearly" class="is-hidden">
  38.           <!-- pricing table content here -->
  39.         </li>
  40.       </ul> <!-- .cd-pricing-wrapper -->
  41.     </li>
  42.  
  43.     <li class="cd-popular">
  44.       <ul class="cd-pricing-wrapper">
  45.         <li data-type="monthly" class="is-visible">
  46.           <!-- pricing table content here -->
  47.         </li>
  48.  
  49.         <li data-type="yearly" class="is-hidden">
  50.           <!-- pricing table content here -->
  51.         </li>
  52.       </ul>
  53.     </li> <!-- .cd-pricing-wrapper -->
  54.  
  55.     <li>
  56.       <ul class="cd-pricing-wrapper">
  57.         <li data-type="monthly" class="is-visible">
  58.           <!-- pricing table content here -->
  59.         </li>
  60.  
  61.         <li data-type="yearly" class="is-hidden">
  62.           <!-- pricing table content here -->
  63.         </li>
  64.       </ul> <!-- .cd-pricing-wrapper -->
  65.     </li>
  66.   </ul> <!-- .cd-pricing-list -->
  67. </div> <!-- .cd-pricing-container -->

CSS 样式:

在小屏幕上,.cd-pricing-footer 被设置为 position: absolute,并将其放在.cd-pricing-header 上。按钮被设置为 display: block 和 height: 100%,这样按钮有和表格底部相同高度的尺寸。并对 .cd-pricing-header 使用

也想出现在这里?联系我们
创客主机
  1. pointer-events: none来使按钮可点击。
  2. .cd-pricing-header {
  3.   height: 80px;
  4.   pointer-events: none;
  5. }
  6. .cd-pricing-body {
  7.   overflow-x: auto;
  8.   /* smooth scrolling on touch devices */
  9.   -webkit-overflow-scrolling: touch;
  10. }
  11. .cd-pricing-footer {
  12.   position: absolute;
  13.   top: 0;
  14.   left: 0;
  15.   height: 80px;
  16.   width: 100%;
  17. }
  18. .cd-select {
  19.   display: block;
  20.   height: 100%;
  21.   /* hide button text on mobile */
  22.   overflow: hidden;
  23.   text-indent: 100%;
  24.   white-space: nowrap;
  25.   color: transparent;
  26. }

在大屏幕上(屏幕尺寸大于 1170px),CSS 样式十分简单,你可以参照 css 文件上的注释。

重要提示:我们创建 3 个 class 来定制三个价格表(所有的 class 都被阴影到.cd-pricing-container 元素上)。

  1.     cd-full-width-为.cd-pricing-container元素设置100%宽度,max-width: none(默认情况下我们设置宽度为90%和max-width为1170px)
  2.  
  3.     cd-tables-have-margin-为价格表添加一个右边的margin
  4.  
  5.     cd-secondary-theme-用于实现不同的颜色theme

在 demo 中我们创建了组价格表样式:第一组为默认的样式;第二组使用了.cd-full-width 和.cd-second-theme class;第三组使用了.cd-tables-have-margin class。

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
下载地址
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

热销模板

高端信息技术产品展示DedeCMS织梦中英文模板

Envato

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!