效果：http://hovertree.com/code/run/jquery/a1gr3gm9.html

可以用手机查看效果。

代码如下：

 <!doctype html>

 <html lang="zh">

 <head>

 <meta charset="UTF-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 <meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body{overflow:scroll}</style>

 <title>jQuery手机端触摸卡片切换效果 - 何问起</title>

 <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/mobile/7/css/normalize.css" />

 <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/mobile/7/css/demo.css" />

 <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/mobile/7/css/style.css" />

 </head>

 <body>

 <br><br>

 <div class="view">

     <div class="card__full">

         <div class="card__full-top">

             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

                     <path d="M16.59 8.59l-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z"/>

                     <path d="M0 0h24v24h-24z" fill="none"/>

             </svg>

             <span class="card__full-num"></span>

         </div>

         <div class="card__full-bottom">

             <p class="card__full-handle"></p>

             <p class="card__full-info"></p>

         </div>

     </div>

     <ul class="card__list">

         <li class="card__item card__item--blue">

             <div class="card__info">

                 <div class="info-player">

                     <p class="info-player__num">9</p>

                     <p class="info-player__name"><small>忘了</small><br>算了</p>

                 </div>

                 <div class="info-place">1<sup>st</sup></div>

             </div>

         </li>

         <li class="card__item card__item--purple">

             <div class="card__info">

                 <div class="info-player">

                     <p class="info-player__num">18</p>

                     <p class="info-player__name"><small>Tom</small><br><a href="http://hovertree.com/code/jquery/a1gr3gm9.htm">原文</a></p>

                 </div>

                 <div class="info-place">2<sup>nd</sup></div>

             </div>

         </li>

         <li class="card__item card__item--green">

             <div class="card__info">

                 <div class="info-player">

                     <p class="info-player__num">12</p>

                     <p class="info-player__name"><small>Hoverc</small><br><a href="http://hovertree.com/h/bjaf/lxxidg7g.htm">下载</a></p>

                 </div>

                 <div class="info-place">3<sup>rd</sup></div>

             </div>

         </li>

         <li class="card__item card__item--yellow">

             <div class="card__info">

                 <div class="info-player">

                     <p class="info-player__num">7</p>

                     <p class="info-player__name"><small>何问起</small><br>如何了断思念</p>

                 </div>

                 <div class="info-place">4<sup>th</sup></div>

             </div>

         </li>

         <li class="card__item card__item--tan">

             <div class="card__info">

                 <div class="info-player">

                     <p class="info-player__num">9</p>

                     <p class="info-player__name"><small>柯乐义</small><br>keleyi.com</p>

                 </div>

                 <div class="info-place">5<sup>th</sup></div>

             </div>

         </li>

         <li class="card__item card__item--orange">

             <div class="card__info">

                 <div class="info-player">

                     <p class="info-player__num">18</p>

                     <p class="info-player__name"><small>hewenqi</small><br>HoverTree</p>

                 </div>

                 <div class="info-place">6<sup>th</sup></div>

             </div>

         </li>

     </ul>

 </div>

 <script src="http://hovertree.com/ziyuan/jquery/jquery-2.2.0.min.js" type="text/javascript"></script>

 <script src="http://hovertree.com/texiao/mobile/7/js/cards.js" charset="utf-8" type="text/javascript"></script>

 </body>

 </html>

下载：http://hovertree.com/h/bjaf/lxxidg7g.htm

更多特效：http://www.cnblogs.com/jihua/p/webfront.html

jQuery手机端触摸卡片切换效果的更多相关文章

  1. css3 手机端翻屏切换效果

    原理是基于css3的 1.景深:perspective:100px; 2.中心点:transform-origin:center center 0; 3.transform-style:preserv ...

  2. jQuery鼠标悬停内容动画切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery手机端上拉刷新下拉加载更多页面

    基于jQuery手机端上拉下拉刷新页面代码.这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  4. Swift 版本很好的卡片切换效果基于ZLSwipeableView

    前言:在这篇文章你可以学到,一些基本的Swift语法, 基本UI控件闭包等. 实际的效果,比gif图的效果好很多. 卡片切换.gif 首先需要导入ZLSwipeableView pod 'ZLSwip ...

  5. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  6. jquery手机端横屏判断方法

    jquery手机端横屏判断方法<pre>$(function() { var bodywidth = $('body').width(); var bodyheight = $('body ...

  7. 手机端的tab切换，响应式切换效果

    之前写过这些tab切换的效果,无论网页上还是手机端,网上也有很多的例子,这个好像是我参考网上,也不知道是哪里的了.总结了一下,就当保存下来了把. <!DOCTYPE html > < ...

  8. jQuery plugin : bgStretcher 背景图片切换效果插件

    转自:http://blog.dvxj.com/pandola/jQuery_bgStretcher.html bgStretcher 2011 (Background Stretcher)是一个jQ ...

  9. jquery手机端产品列表响应式宽高检测宽度赋值给高度让宽高相同

    在手机端浏览商品列表,开发人员懂得设计图片做正好的尺寸,那样浏览很好,但有人天生泛懒图片都是随手上传不管大小合适不合适,要求还是响应式的.今天就用jquery检测宽度,并赋值给高度来实现错位问题 &l ...

随机推荐

  1. datagrid界面，链接数据库读取数据

    1.学生列表的 HTML部分 <script type="text/javascript"> $(function(){ //创建dataGrid $("#d ...

  2. Entity Framework Code First实体对象变动跟踪

    Entity Framework Code First通过DbContext.ChangeTracker对实体对象的变动进行跟踪,实现跟踪的方式有两种:变动跟踪快照和变动跟踪代理. 变动跟踪快照:前面 ...

  3. JavaScript 命名空间

    <script type="text/javascript"> Namespace=new Object(); Namespace.register=function( ...

  4. 深入学习jQuery节点关系

    × 目录 [1]后代元素 [2]祖先元素 [3]兄弟元素 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形 ...

  5. Notes:indexedDB使用

    indexedDB是浏览器端保存结构化数据的一种数据库,类似于mysql,oracle等数据库,但indexedDB使用对象存储数据,而不是用表. indexedDB是全局的宿主对象,使用window ...

  6. 通过SSH连接linux服务器

    SSH 为 Secure Shell 的缩写,由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为建立在应用层和传输层基础上的安全协议.SSH 是目前较可靠,专 ...

  7. 窥探Swift编程之在Playground上尽情的玩耍

    自从苹果公司发布Swift的时候,Xcode上又多了一样新的东西---"Playground".Playground就像操场一样,可以供我们在代码的世界里尽情的玩耍,在本篇博客中就 ...

  8. （转）J2EE的13种核心技术

    一.JDBC(Java Database Connectivity)  JDBC API为访问不同的数据库提供了一种统一的途径,象ODBC一样,JDBC对开发者屏蔽了一些细节问题,另外,JDBC对数据 ...

  9. KVM的前世今生

    1.虚拟化技术的演变过程:软件模拟.虚拟化层翻译.容器虚拟化三个阶段 (1)软件模拟的技术方式 软件模拟是通过软件完全模拟CPU.网卡.芯片组.磁盘等计算机硬件,因为是软件模拟,所以理论上可以模拟任何 ...

  10. [AngularJS] AngularJS系列(6) 中级篇之ngResource

    目录 $http ngResource $http几乎是所有ng开发中,都会用到的服务.本节将重点说下$http 与 ngResource $http 使用:$http(config); 参数: me ...