效果：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中通讯录的开发

    通讯录开发主要是获取用户手机中的联系人,进而可以在应用中添加好友 一 .如何访问通讯录 (1)在iOS9之前,有两个框架可以访问用户的通讯录 AddressBookUI.framework: 提供了联 ...

  2. Excel 导入到Datatable 中，再使用常规方法写入数据库

    首先呢?要看你的电脑的office版本,我的是office 2013 .为了使用oledb程序,需要安装一个引擎.名字为AccessDatabaseEngine.exe.这里不过多介绍了哦.它的数据库 ...

  3. MacOS中使用QT开发iOS应用

    因为项目合同中规定一部分业务内容要在手机端实现,包括安卓机和苹果机,因此选择了QT作为开发工具.程序在Win10和安卓系统上已经完美运行,这几天开始搭建iOS的编译和发布环境,因为以前没有使用过mac ...

  4. HTML5系列：HTML5表单

    1. input元素新增类型 url类型 url类型的input元素是一种用来输入url的文本框,提交时如果该文本框中内容不是url格式,则不允许提交. <input type="ur ...

  5. 小白学习MVC5+EF6遇到的问题一

    这两天有空的时候会看看Miro大神的MVC5+EF6系列文章,推荐大家看看. 以前没有接触过,纯小白一个,今天在学习的过程中遇到了一个问题,习惯了WebForm,在运行页面之前都会右键设置为起始页,我 ...

  6. Android之startService()和bindService()区别

    1. 生命周期: startService()方式启动,Service是通过接受Intent并且会经历onCreate()和onStart().当用户在发出意图使之销毁时会经历onDestroy(), ...

  7. Bootstrap Metronic 学习记录（二）菜单栏

    1.简介 1)  .环境配置 2)  .提取页面 2).动态生成菜单(无限级别树) 2.系统环境配置 项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQ ...

  8. .NET平台开源项目速览(2)Compare .NET Objects对象比较组件

    .NET平台开源项目速览今天介绍一款小巧强大的对象比较组件.可以更详细的获取2个对象的差别,并记录具体差别,比较过程和要求可以灵活配置. .NET开源目录:[目录]本博客其他.NET开源项目文章目录 ...

  9. Vagrant使用

    常用命令 命令 说明 vagrant up 运行vm vagrant status 查看当前虚拟机运行状态 vagrant suspend 暂停虚拟机 vagrant ssh ssh方式登录虚拟机 v ...

  10. php对文本文件进行分页功能简单实现

    php对文本文件进行分页功能简单实现 <!DOCTYPE> <html> <head> <meta http-equiv="Content-type ...