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

PetitQ 表单/表格 2年前

591 0 0

也想出现在这里？联系我们吧

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

HTML 结构:

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

也想出现在这里？联系我们吧

```
<div class="cd-pricing-container">
```
```
  <div class="cd-pricing-switcher">
```
```
    <p class="fieldset">
```

      <input type="radio" name="duration" value="monthly" id="monthly" checked>

      <label for="monthly">Monthly</label>

      <input type="radio" name="duration" value="yearly" id="yearly">

      <label for="yearly">Yearly</label>

```
      <span class="cd-switch"></span>
```
```
    </p>
```
```
  </div> 
```
```
 
```
```
  <ul class="cd-pricing-list">
```
```
    <li>
```
```
      <ul class="cd-pricing-wrapper">
```

        <li data-type="monthly" class="is-visible">

          <header class="cd-pricing-header">

```
            <h2>Basic</h2>
```
```
            <div class="cd-price">
```

              <span class="cd-currency">$</span>

              <span class="cd-value">30</span>

              <span class="cd-duration">mo</span>

```
            </div>
```

          </header> <!-- .cd-pricing-header -->

```
 
```
```
          <div class="cd-pricing-body">
```

            <ul class="cd-pricing-features">

              <li><em>256MB</em> Memory</li>

              <!-- other features here -->

```
            </ul>
```

          </div> <!-- .cd-pricing-body -->

```
 
```

          <footer class="cd-pricing-footer">

            <a class="cd-select" href="http://www.htmleaf.com/">Select</a>

          </footer> <!-- .cd-pricing-footer -->

```
        </li>
```
```
 
```

        <li data-type="yearly" class="is-hidden">

          <!-- pricing table content here -->

```
        </li>
```

      </ul> <!-- .cd-pricing-wrapper -->

```
    </li>
```
```
 
```
```
    <li class="cd-popular">
```
```
      <ul class="cd-pricing-wrapper">
```

        <li data-type="monthly" class="is-visible">

          <!-- pricing table content here -->

```
        </li>
```
```
 
```

        <li data-type="yearly" class="is-hidden">

          <!-- pricing table content here -->

```
        </li>
```
```
      </ul>
```
```
    </li> 
```
```
 
```
```
    <li>
```
```
      <ul class="cd-pricing-wrapper">
```

        <li data-type="monthly" class="is-visible">

          <!-- pricing table content here -->

```
        </li>
```
```
 
```

        <li data-type="yearly" class="is-hidden">

          <!-- pricing table content here -->

```
        </li>
```

      </ul> <!-- .cd-pricing-wrapper -->

```
    </li>
```
```
  </ul> 
```
```
</div> 
```

CSS 样式:

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

也想出现在这里？联系我们吧

pointer-events: none来使按钮可点击。

```
.cd-pricing-header {
```
```
  height: 80px;
```
```
  pointer-events: none;
```
```
}
```
```
.cd-pricing-body {
```
```
  overflow-x: auto;
```

  /* smooth scrolling on touch devices */

```
  -webkit-overflow-scrolling: touch;
```
```
}
```
```
.cd-pricing-footer {
```
```
  position: absolute;
```
```
  top: 0;
```
```
  left: 0;
```
```
  height: 80px;
```
```
  width: 100%;
```
```
}
```
```
.cd-select {
```
```
  display: block;
```
```
  height: 100%;
```
```
  /* hide button text on mobile */
```
```
  overflow: hidden;
```
```
  text-indent: 100%;
```
```
  white-space: nowrap;
```
```
  color: transparent;
```
```
}
```

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

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

    cd-full-width-为.cd-pricing-container元素设置100%宽度，max-width: none（默认情况下我们设置宽度为90%和max-width为1170px）

```
 
```

    cd-tables-have-margin-为价格表添加一个右边的margin

```
 
```

    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），我们会及时删除，给您带来的不便，我们深表歉意！