效果：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. C#设计模式-建造者模式

    在软件系统中,有时需要创建一个复杂对象,并且这个复杂对象由其各部分子对象通过一定的步骤组合而成. 例如一个采购系统中,如果需要采购员去采购一批电脑时,在这个实际需求中,电脑就是一个复杂的对象,它是由C ...

  2. iOS开发-闪退问题-解决之前上架的 App 在 iOS 9 会闪退问题

    最新更新:(2015.10.02) 开发环境: Delphi 10 Seattle OS X El Capitan v10.11 需使用下列 HotfixID: 30398, PAServer Hot ...

  3. 读书笔记-you-don't-konw-js

    第一部分:作用域和闭包 不要满足于只是让代码正常工作,而是弄清楚为什么是这样 作用域是什么 定义的变量存储在哪里?程序是如何找到变量的?实现的 规则就是作用域 传统编译语言执行前的编译三步骤(p5) ...

  4. iTween 动画类型

    iTween 动画类型 http://robertpenner.com/easing/easing_demo.html 使用范例 http://www.xuanyusong.com/archives/ ...

  5. 12款非常精致的免费 HTML5 & CSS3 网站模板

    01. Joefrey Mahusay 很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历.摄影师和平面设计师的个人作品展示. 演示  下载 02. Folder ...

  6. Javascript之一切皆为对象1

    在javascript的世界里,有这么一句话,一切皆为对象. 但是这个对象,应该怎么理解呢? OMG,难道值类型也是对象?!! 当然,不是. 准确地讲是对于“引用类型”而言. 那,在JavaScrip ...

  7. angularjs 锚点操作服务 $anchorScroll

    在普通的html网页中,我们可以通过在url后边添加  #elementid 的方式,将页面显示定位到某个元素,也就是锚点. 但是在angularjs应用的网页中,页面路由的写法是 #route/ro ...

  8. GROUP函数-GROUP_ID,GROUPING,GROUPING_ID

    GROUP_ID 首先我们看看官方的解释: 大意是GROUP_ID用于区分相同分组标准的分组统计结果. 解释起来比较抽象,下面我们来看看具体的案例. 例1:单一分组 SQL> select gr ...

  9. Stackoverflow/dapper的Dapper-Extensions用法（一）

    Dapper-Extensions Dapper Extensions is a small library that complements Dapper by adding basic CRUD ...

  10. CSS浮动文摘

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程.        写在前面的话:        由于CSS内容比较多,没有精力从头到尾讲一遍,只能有 ...