效果：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. 【hadoop2.2(yarn)】基于yarn成功执行分布式map-reduce，记录问题解决过程。

    hadoop2.x改进了hadoop1.x的架构, 具体yarn如何工作以及改进了什么可以在网上学, 这里仅记录我个人搭建的问题和理解,希望能帮助遇到困难的朋友. 在开始前,必须了解yarn版本的ma ...

  2. TSQL语句练习题

    1. 查询Student表中的所有记录的Sname.Ssex和Class列. select Sname,Ssex,Class from Student 2. 查询教师所有的单位即不重复的Depart列 ...

  3. ConcurrentDictionary线程不安全么，你难道没疑惑，你难道弄懂了么？

    前言 事情不太多时,会时不时去看项目中同事写的代码可以作个参考或者学习,个人觉得只有这样才能走的更远,抱着一副老子天下第一的态度最终只能是井底之蛙.前两篇写到关于断点传续的文章,还有一篇还未写出,后续 ...

  4. 在.NET开发面向Oracle数据库的应用程序

    其实这个不是一个什么新的话题.但是之前在多次项目中,总是遇到大家针对Oracle数据库的访问时,会有各种各样的问题,最基本的就是要在客户端安装各种client,版本不一样的话还有各种问题. 静下心来看 ...

  5. NAS与SAN

    1. NAS(Network Attached Storage,网络附加存储服务器) 简单地说,NAS就是一台File Server,只要将NAS连接上网络,那么在网络上面的其他主机就能够访问NAS上 ...

  6. 关于在用curl函数post网页数据时，遇上表单提交 type为submit 类型而且没有name和id时可能遇到的问题及其解决方法

    curl函数库实现爬网页内容的链接在 http://www.cnblogs.com/linguanh/p/4292316.html 下面这个是没有name和id 标识的 <input type= ...

  7. jQuery中的Sizzle引擎分析

    我分析的jQuery版本是1.8.3.Sizzle代码从3669行开始到5358行,将近2000行的代码,这个引擎的版本还是比较旧,最新的版本已经到v2.2.2了,代码已经超过2000行了.并且还有个 ...

  8. 关于JavaScript预编译和执行顺序以及函数引用类型的思考

    昨晚在对项目中的一部分做模块化处理的时候,遇到了一个问题,一个重新定义的function对一个通用类中的function进行赋值覆盖的时候,失败了.问题抽象出来是这样的: <script > ...

  9. 记一次由于Java泛型类型擦除而导致的问题，及解决办法

    中所周知,Java中的泛型并不像C++.C#一样是真正的泛型,其泛型是通过类型擦除来实现的.具体什么是类型擦除,可以参看这篇博文:http://icyfenix.iteye.com/blog/1021 ...

  10. MVC的基类

    设计一个验证用户身份是否登陆的基类BaseController /// <summary> /// 所有需要进行登录控制的控制器基类 /// </summary> public ...