效果：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. iOS-----Crash文件分析(一)

    开发程序的过程中不管我们已经如何小心,总是会在不经意间遇到程序闪退.脑补一下当你在一群人面前自信的拿着你的App做功能预演的时候,流畅的操作被无情地Crash打断.联想起老罗在发布Smartisan ...

  2. Java学习笔记（03）

    一.回顾运算符: 一．控制语句 1.1 顺序结构 (最常见的) 特点:代码从上往下依次执行

  3. WaitType：ASYNC_IO_COMPLETION

    项目组有一个数据库备份的Job运行异常,该Job将备份数据存储到remote server上,平时5个小时就能完成的备份操作,现在运行19个小时还没有完成,backup命令的Wait type是 AS ...

  4. SQL 里解析 XML 格式 字段 信息

    DECLARE @ItemMessage XML ),zje ),yfje ),bcje ),URL ),Remark )) SET @ItemMessage=N'<List> <i ...

  5. 一起学微软Power BI系列-官方文档-入门指南(5)探索数据奥秘

    我们几篇系列文章中,我们介绍了官方入门文档与获取数据等基本知识.今天继续给大家另外一个重点,探索数据奥秘.有了数据源,有了模型,下一步就是如何解析数据了.解析数据的过程需要很多综合技能,不仅仅是需要掌 ...

  6. 分享几个.NET WinForm开源组件，纪念逐渐远去的WinForm。。。

    前面3个月的时间内,这些.NET开源项目你知道吗?系列文章已经发表了3篇,共计45个平时接触比较少,曾经默默无闻的.NET开源项目,展示给大家,当然不是每个人都能用得上,但也的确是有些人用了,反响还不 ...

  7. Web APi之控制器选择Action方法过程（九）

    前言 前面我们叙述了关于控制器创建的详细过程,在前面完成了对控制器的激活之后,就是根据控制器信息来查找匹配的Action方法,这就是本节要讲的内容.当请求过来时首先经过宿主处理管道然后进入Web AP ...

  8. MongoDB学习系列(1)--入门介绍

    MongoDB是一款为Web应用程序设计的面向文档结构的数据库系统. MongoDB贡献者是10gen公司.地址:http://www.10gen.com 1.MongoDB主要特性: 1.1文档数据 ...

  9. EntityFramework 外键值映射

    如果在 EF OnModelCreating 中配置了实体外键映射,也就是 SQL Server 中的 ForeignKey,那么我们在添加实体的时候,主实体的主键值会自动映射到子实体的外键值,并且这 ...

  10. objective-c中的@selector()和 c /c++的函数指针

    先看tomcat里用到的代码: //然后开始动画 //把图片放到animationImages,接受数组参数 self.tom.animationImages = arrayImage; //设置时间 ...