jQuery手机端触摸卡片切换效果

最新推荐文章于 2023-08-09 10:44:06 发布
最新推荐文章于 2023-08-09 10:44:06 发布
阅读量311 收藏
点赞数
分类专栏： 前端
原文链接：https://www.mk2048.com/blog/blog_hj22bha0hcbb.html
版权

效果：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 xmlns="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="http://hovertree.com/ziyuan/jquery/jquery-2.2.0.min.js" type="text/javascript"></script>
89 <script src="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

会做饭的技术男
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用jQuery实现切换卡片的效果
u_u2020的博客
05-26 668
使用jQuery实现切换卡片的效果 现在我们来用jQuery实现切换卡片的效果。 首先我们写一个div给他一个类为body，我们来写一下它的样式：width:400px; height:295px; border:2px solid #000000; position:relative;用它来装所有的内容。 在里面放两个div和两个i标签，两个div分别放在第一个和最后一个，分别给他们设置样式：第一个div的样式：height:50px; border-bottom:2px solid #0000
jQuery mobile卡片式的时钟显示
12-16
jQuery mobile卡片式的时钟显示
移动端卡片拖动切换效果_美化移动端网站效果｜手机网站设计指南
weixin_40004659的博客
12-09 101
现在越来越多用户都是用移动设备来浏览网站，这就凸显出手机网站设计的重要性了。如何做好手机网站设计建设？你需要注意这几点：1.色彩搭配通过色彩可以传递企业文化和设计师的情感，而色彩规范一般是注重“品牌色、辅助色、点缀色、状态色、背景色”的色值和使用范围，高质量的企业品牌网站，一定要用自己的品牌颜色为网站主打色，再用其他适配的辅助色，给访客留下深刻的品牌印象。2.字体选择字体也能体现出一个企业的“性格...
jQuery H5手机端触摸卡片信息切换展示效果.zip
07-11
代码片段： 18 TomBrady 2nd
手机端卡片效果轮播
06-03
移动端卡片效果上下轮播效果
jQuery手机端触摸卡片切换效果特效代码
03-20
【jQuery手机端触摸卡片切换效果特效代码】是一个专为移动设备设计的用户界面元素，它采用了流行的Material Design设计理念，提供了一种优雅的方式来展示信息卡片。这个特效主要利用jQuery库来实现，通过触摸滑动...
jQuery手机端触摸卡片切换效果.zip
07-03
jQuery手机端触摸卡片切换效果是一款Material Design风格的信息卡片UI设计效果。
jQuery手机端触摸卡片信息切换展示效果.zip
07-11
<span class="card__full-num"></span> <p class="card__full-handle"></p> ... ... 这是一款Material Design风格的信息卡片UI设计效果的jQuery手机端触摸卡片信息切换展示特效。
jQuery手机端触摸卡片信息切换展示效果
06-10
这个名为“jQuery手机端触摸卡片信息切换展示效果”的项目，就是针对这一需求而设计的。它采用Material Design风格，这种设计语言由Google推出，以其简洁、直观和富有层次感的界面而闻名，能够提供一致且吸引人的...
jquery制作仿iphone苹果手机界面触屏切换效果
06-10
jquery框架与coffeescript制作，模仿iphone苹果IOS手机主屏幕触摸效
卡片左右切换
07-28
利用DragHelper实现卡片左右切换
移动端选项卡切换，滑动切换
11-19
web移动端选项卡切换，可以滑动切换，也能点击切换。
Vue2CSwipeMobile一个简单的Vue2x移动端卡片滑动组件
08-12
Vue2-C-Swipe Mobile 一个简单的移动端卡片滑动组件，适用于Vue2.x
手机端贺卡效果
07-22
过年手机微信祝福动画贺卡，基于HTML5、jQuery制作，带网页背景音乐，可以把你的祝福发送给好友，分享到朋友圈，分享到微博。
【3D卡片切换】基于jquery实现3D堆叠卡片切换效果（附完整源码）
最新发布
赏樱看雪撸代码
08-09 1037
Jquery如何实现卡片堆叠轮播切换，如何实现3D图文卡片堆叠轮播效果，js实现3D卡片堆叠切换效果，3D卡片堆叠轮播demo。
卡片式切换效果
Code_dh的博客
06-27 4616
今天跟大家分享一个卡片切换的效果：一个说不上酷炫但很有意思的效果首先大体思路是：效果有多个View和动画组成的集合，既然是多个View那么复用肯定是首先要想到的，我这边用到的是RecycleView ，控件的叠加效果可以通过自定义RecycleView的LayoutManager来实现，而RecycleView并没有提供相关Api来支持拖拽效果的监听，好在SDK提供的一个强大的工具类ItemTou...
Jquery mobile 使用之基础篇
yinjingjing00的专栏
04-24 2005
首先声明：jquery mobile 版本不同，代码差距比较大，建议使用最新版本---1.4.5; 官网主页：http://jquerymobile.com/ 注:复制官网上的代码时，需要注意空格删除！否则页面样式可能出现空行或者错位； 教程主页：http://www.w3school.com.cn/jquerymobile/（有时候自学也是一种选择！有图，有真相！） 1.引入js、css
jQuery手机触摸滑动切换图片代码
Lucky Star的博客
11-22 2824
flickity-docs.css html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } a { background-color: transparent; } a:active, a:hove
jquery如何实现卡片切换类似轮播效果
07-14
要实现类似轮播效果的卡片切换，你可以使用 jQuery 的动画和事件处理函数来实现。下面是一个简单的示例代码： HTML 结构： ```html <div class="carousel"> <div class="card active">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> </div> <button id="prevBtn">Previous</button> <button id="nextBtn">Next</button> ``` CSS 样式： ```css .carousel { width: 300px; height: 200px; position: relative; overflow: hidden; } .card { width: 100%; height: 100%; position: absolute; display: none; } .card.active { display: block; } ``` jQuery 代码： ```javascript $(document).ready(function() { var currentIndex = 0; var cards = $('.card'); // 显示当前卡片 function showCard(index) { cards.removeClass('active'); cards.eq(index).addClass('active'); } // 下一个卡片 $('#nextBtn').click(function() { currentIndex++; if (currentIndex >= cards.length) { currentIndex = 0; } showCard(currentIndex); }); // 上一个卡片 $('#prevBtn').click(function() { currentIndex--; if (currentIndex < 0) { currentIndex = cards.length - 1; } showCard(currentIndex); }); // 自动轮播 setInterval(function() { currentIndex++; if (currentIndex >= cards.length) { currentIndex = 0; } showCard(currentIndex); }, 3000); }); ``` 以上代码实现了一个简单的卡片切换轮播效果。点击 "Next" 按钮可以切换到下一个卡片，点击 "Previous" 按钮可以切换到上一个卡片。同时还设置了自动轮播功能，每隔 3 秒自动切换到下一个卡片。你可以根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值