JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 用CSS与jQuery打造很炫的切换效果

用CSS与jQuery打造很炫的切换效果

      今天为大家分享一套用CSS与jQuery打造很炫的切换效果模版,它是一个精心设计的切换过度的动画特效,如果您的网站有很多布局相同的内容,它们都有着相同的模块分布在不同的类别,那么这套模版非常适合您。对于一个电商网站,您可能希望用户能快速的找到所希望的产品,这套模版也具有搜索功能,能帮助用户快速找到自己所需要的产品。它利用CSS转换和jQuery的滑动来实现的,还具有响应式功能,希望对您的项目有所帮助。




演示效果

用CSS与jQuery打造很炫的切换效果.rar

  1. <header class="cd-header">
  2.         <h1>Content Filter</h1>
  3. </header>

  4. <main class="cd-main-content">
  5.         <div class="cd-tab-filter-wrapper">
  6.                 <div class="cd-tab-filter">
  7.                         <ul class="cd-filters">
  8.                                 <li class="placeholder">
  9.                                         <a data-type="all" href="#0">All</a> <!-- selected option on mobile -->
  10.                                 </li>
  11.                                 <li class="filter"><a class="selected" href="#0" data-type="all">All</a></li>
  12.                                 <li class="filter" data-filter=".color-1"><a href="#0" data-type="color-1">Color 1</a></li>
  13.                                 <li class="filter" data-filter=".color-2"><a href="#0" data-type="color-2">Color 2</a></li>
  14.                         </ul> <!-- cd-filters -->
  15.                 </div> <!-- cd-tab-filter -->
  16.         </div> <!-- cd-tab-filter-wrapper -->

  17.         <section class="cd-gallery">
  18.                 <ul>
  19.                         <li class="mix color-1 check1 radio2 option3"><img src="img/img-1.jpg" alt="Image 1"></li>
  20.                         <li class="mix color-2 check2 radio2 option2"><img src="img/img-2.jpg" alt="Image 2"></li>
  21.                         <li><!-- ... --></li>
  22.                         <li class="gap"></li>
  23.                 </ul>
  24.                 <div class="cd-fail-message">No results found</div>
  25.         </section> <!-- cd-gallery -->

  26.         <div class="cd-filter">
  27.                 <form>
  28.                         <div class="cd-filter-block">
  29.                                 <h4>Block title</h4>
  30.                                
  31.                                 <div class="cd-filter-content">
  32.                                         <!-- filter content -->
  33.                                 </div> <!-- cd-filter-content -->
  34.                         </div> <!-- cd-filter-block -->
  35.                 </form>

  36.                 <a href="#0" class="cd-close">Close</a>
  37.         </div> <!-- cd-filter -->

  38.         <a href="#0" class="cd-filter-trigger">Filters</a>
  39. </main> <!-- cd-main-content -->
复制代码
  1. .cd-tab-filter-wrapper {
  2.   background-color: #ffffff;
  3.   z-index: 1;
  4. }

  5. .cd-filter {
  6.   position: absolute;
  7.   top: 0;
  8.   left: 0;
  9.   width: 280px;
  10.   height: 100%;
  11.   background: #ffffff;
  12.   z-index: 2;
  13.   transform: translateX(-100%);
  14.   transition: transform 0.3s, box-shadow 0.3s;
  15. }

  16. .cd-filter-trigger {
  17.   position: absolute;
  18.   top: 0;
  19.   left: 0;
  20.   height: 50px;
  21.   width: 60px;
  22.   z-index: 3;
  23. }

  24. .cd-main-content.is-fixed .cd-tab-filter-wrapper {
  25.   position: fixed;
  26.   top: 0;
  27.   left: 0;
  28.   width: 100%;
  29. }

  30. .cd-main-content.is-fixed .cd-filter {
  31.   position: fixed;
  32.   height: 100vh;
  33.   overflow: hidden;
  34. }

  35. .cd-main-content.is-fixed .cd-filter-trigger {
  36.   position: fixed;
  37. }
复制代码


via:http://www.yunrui.co/22245.html


【用CSS与jQuery打造很炫的切换效果】相关文章

1. 用CSS与jQuery打造很炫的切换效果

2. 用CSS和jQuery打造3D窗帘切换特效

3. 用纯CSS3实现图片幻灯片切换效果

4. HTML5和jQuery打造的3D相册

5. 随机字符变换效果的jQuery插件开发教程

6. 随机字符变换效果的jQuery插件开发教程

7. HTML5与jQuery实现渐变绚丽网页图片效果

8. 用CSS3打造一组闪亮的半透明按钮效果

9. 10款超炫的开源jquery的源码预览效果

10. 利用HTML5与jQuery技术创建一个简单的自动表单完成

本文来源:https://www.51html5.com/a1475.html

点击展开全部

﹝用CSS与jQuery打造很炫的切换效果﹞相关内容

「用CSS与jQuery打造很炫的切换效果」相关专题

其它栏目

也许您还喜欢