效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html
可以用手机查看效果。
代码如下:
1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body{overflow:scroll}</style> 7 <title>jQuery手机端触摸卡片切换效果 - 何问起</title> 8 9 <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/mobile/7/css/normalize.css" />10 <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/mobile/7/css/demo.css" />11 <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/mobile/7/css/style.css" />12 13 </head>14 <body>15 <br><br>16 <div class="view">17 <div class="card__full">18 <div class="card__full-top">19 <svg ="http://www.w3.org/2000/svg" viewBox="0 0 24 24">20 <path d="M16.59 8.59l-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z"/>21 <path d="M0 0h24v24h-24z" fill="none"/>22 </svg>23 <span class="card__full-num"></span>24 </div>25 <div class="card__full-bottom">26 <p class="card__full-handle"></p>27 <p class="card__full-info"></p>28 </div>29 </div>30 <ul class="card__list">31 <li class="card__item card__item--blue">32 <div class="card__info">33 <div class="info-player">34 <p class="info-player__num">9</p>35 <p class="info-player__name"><small>忘了</small><br>算了</p>36 </div>37 <div class="info-place">1<sup>st</sup></div>38 </div>39 </li>40 <li class="card__item card__item--purple">41 <div class="card__info">42 <div class="info-player">43 <p class="info-player__num">18</p>44 <p class="info-player__name"><small>Tom</small><br><a href="http://hovertree.com/code/jquery/a1gr3gm9.htm">原文</a></p>45 </div>46 <div class="info-place">2<sup>nd</sup></div>47 </div>48 </li>49 <li class="card__item card__item--green">50 <div class="card__info">51 <div class="info-player">52 <p class="info-player__num">12</p>53 <p class="info-player__name"><small>Hoverc</small><br><a href="http://hovertree.com/h/bjaf/lxxidg7g.htm">下载</a></p>54 </div>55 <div class="info-place">3<sup>rd</sup></div>56 </div>57 </li>58 <li class="card__item card__item--yellow">59 <div class="card__info">60 <div class="info-player">61 <p class="info-player__num">7</p>62 <p class="info-player__name"><small>何问起</small><br>如何了断思念</p>63 </div>64 <div class="info-place">4<sup>th</sup></div>65 </div>66 </li>67 <li class="card__item card__item--tan">68 <div class="card__info">69 <div class="info-player">70 <p class="info-player__num">9</p>71 <p class="info-player__name"><small>柯乐义</small><br>keleyi.com</p>72 </div>73 <div class="info-place">5<sup>th</sup></div>74 </div>75 </li>76 <li class="card__item card__item--orange">77 <div class="card__info">78 <div class="info-player">79 <p class="info-player__num">18</p>80 <p class="info-player__name"><small>hewenqi</small><br>HoverTree</p>81 </div>82 <div class="info-place">6<sup>th</sup></div>83 </div>84 </li>85 </ul>86 </div>87 88 <script src='/images/loading.gif' data-original="http://hovertree.com/ziyuan/jquery/jquery-2.2.0.min.js" type="text/javascript"></script>89 <script src='/images/loading.gif' data-original="http://hovertree.com/texiao/mobile/7/js/cards.js" charset="utf-8" type="text/javascript"></script>90 91 </body>92 </html>
下载:http://hovertree.com/h/bjaf/lxxidg7g.htm
更多特效:http://www.cnblogs.com/jihua/p/webfront.html
原标题:jQuery手机端触摸卡片切换效果
关键词:jquery