个人信息卡片列表样式切换页面详解

最新推荐文章于 2024-07-07 11:37:59 发布
最新推荐文章于 2024-07-07 11:37:59 发布
阅读量7.6k 收藏 2
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013764814/article/details/83786526
版权
本文详细讲解如何创建一个个人信息卡片列表样式切换的页面。通过HTML结构、CSS背景定位技巧和JavaScript事件绑定，实现点击按钮动态改变列表样式。提供源码链接供读者参考学习。
摘要由CSDN通过智能技术生成

#先随便说说

先来看看长什么样子（动态图可能加载会慢一点）:

效果图

先看怎么写，源码放在了github上本文最后会有链接可以做个参考。

#HTML结构

还是简单的HTML结构（我写的HTML结构都很简单哈哈）

HTML结构

//注意看图片中的文字。具体的样式自己随意发挥就好。

这里有一个CSS的知识，就是background添加图片并且可以设置坐标，具体可以看看这篇文章CSS中背景图片定位方法，这个页面的右上角两个按钮就是用这个方法在一张图片上提取出来的。

#简单的思路

其实JavaScript的思路很简单，就是获取右上角的两个按钮，然后给按钮添加点击事件，当按钮点击后根据不同的按钮再结合当前信息展示形式的判断，对方框里的所有li重新定义一个样式就好辣~四不四很简单哈哈

OK 获取这两个按钮：

编写了一个getByClassName的一个函数可以用

最低0.47元/天 解锁文章
Vue2卡片化布局：动态筛选和响应式网格设计 前端实战：用Vue2构建现代卡片展示页面（附源码） Vue2教程：实现网格布局+侧边栏筛选功能 用Vue2打造动态卡片式布局页面，带筛选功能 高级前端案例
sky10100100的博客
12-10 1153
Vue2卡片化布局：动态筛选和响应式网格设计 前端实战：用Vue2构建现代卡片展示页面（附源码） Vue2教程：实现网格布局+侧边栏筛选功能 用Vue2打造动态卡片式布局页面，带筛选功能 高级前端案例：Vue2+响应式设计的卡片网格布局 从零开始：Vue2卡片化页面布局与交互设计 现代UI设计：Vue2实现卡片式数据展示与筛选功能 Vue2卡片化布局：动态筛选和响应式网格设计 前端实战：用Vue2构建现代卡片展示页面（附源码） Vue2教程：实现网格布局+侧边栏筛选功能 用Vue2打造动态卡片式布局页面，带
Vue2 教程：简约风预约管理系统开发，从功能到样式实现」 「Vue 实战：多功能预约管理系统开发与样式设计详解」 「用 Vue2 构建预约审批页面，打造动态选项卡和状态管理系统」Vue2 教程：简约
最新发布
南北极之间
11-12 609
Vue2 教程：简约风预约管理系统开发，从功能到样式实现」 「Vue 实战：多功能预约管理系统开发与样式设计详解」 「用 Vue2 构建预约审批页面，打造动态选项卡和状态管理系统」Vue2 教程：简约风预约管理系统开发，从功能到样式实现」 「Vue 实战：多功能预约管理系统开发与样式设计详解」 「用 Vue2 构建预约审批页面，打造动态选项卡和状态管理系统」Vue2 教程：简约风预约管理系统开发，从功能到样式实现」 「Vue 实战：多功能预约管理系统开发与样式设计详解」 「用 Vue2 构建预约审批页面，打
Vue实战篇二十三：卡片风格与列表风格的切换
我的博客
03-25 8503
系列文章目录 Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 Vue基础篇四：Vue的生命周期（秒杀案例实战） Vue基础篇五：Vue的指令 Vue基础篇六：Vue使用JSX进行动态渲染 Vue提高篇一：使用Vuex进行状态管理 Vue提高篇二：使用vue-router实现静态路由 Vue提高篇三：使用vue-router实现动态路由 Vue提高篇四：使用Element UI组件库 Vue提高篇五：使用Jest进行单元测试 Vue提高篇六
android 卡片滑动详情页,在Mugeda中制作顺畅的左右滑动切换卡片效果的教程
weixin_32208021的博客
06-02 1026
之前在做《刁角武汉》的时候对如何选择景点这个问题做了好几个方案，一个是画一张大地图，另一个是做垂直的列表选择，但我还是选择了左右滑动来切换景点。因为在多次尝试之后发现发现在手机屏上似乎不适合做可以上下左右滑动的大地图，而垂直列表在 Mugeda 上又有 BUG，经常卡住滑不了。所以为了更好的用户体验，我选择了做左右滑动切换，模拟出平常 app 的效果。目录：一、解析动画效果二、做出初步的动画效果三...
javascript选项卡切换样式
lumot的博客
09-11 291
HTML代码 　　<ul class="touzi_xuan1" id="qixian"> 　　　　<li>****： </li> 　　　　<li style="width: 18px;">&nbsp...
卡片风格与列表风格的切换
askuld的博客
06-19 1951
【代码】卡片风格与列表风格的切换。
B端 — 卡片式列表设计
liudada8265的博客
12-30 999
作者：Nick（转载已取得作者授权）卡片式列表是一种很好的集合信息的方式，它既有好处也有弊端，因此需要根据场景和内容确定展现形式。本文结合了案例与大家分享一下卡片式列表设计的一些思考。一、定义1. 什么是卡片物理世界中，卡片是用以承载信息的独立矩形薄片；例如电话卡、明信片、身份证、扑克等均属此类，具有“便携性、信息简洁和相对独立“等特点。当它作为一种隐喻，延伸至虚拟世界后，其信息结构和交互方式更容...
Android 5.X 新特性详解（二）——列表与卡片
06-12
这些布局管理器让开发者可以轻松地在列表中切换不同的展示样式，如横向滚动、网格布局等。 2. **动画与滑动效果**：RecyclerView内置了ItemAnimator，可以实现更丰富的视图动画，如添加、删除、移动项的动画效果。...
CSS3 SVG图文卡片内容翻转切换特效
06-10
**CSS3 SVG图文卡片内容翻转切换特效详解** 在网页设计中，动态效果往往能吸引用户的注意力并提升用户体验。本文将深入探讨一款基于CSS3和SVG技术实现的图文卡片内容翻转切换特效，该特效通过左右箭头按钮进行控制...
小程序卡片切换效果组件wxCardSwiper的实现
11-21
其中，卡片切换效果是常见的一种设计，用于展示可滑动的卡片内容，例如商品展示、文章列表等。`wxCardSwiper`组件就是专为实现这一效果而设计的，它支持异步加载数据和手势滑动触发，使得内容滚动更加流畅自然。 **...
Bootstrap卡片图文列表布局样式代码
06-11
基于jQuery和Bootstrap实现的卡片图文列表布局样式代码，包括普通的卡片布局、等高卡片布局等。
支持卡片式的列表视图特效
04-02
实现卡片式的列表视图，增加一个cell类似于插入一张卡片。cell的位置转换类似于卡片的位置互换，效果很棒。这种卡片式的列表视图运用在Google Now App中，喜欢的朋友可以下载吧。 使用方法： RSCardsView *view = [[[RSCardsView alloc] initWithFrame: [UIScreen mainScreen].applicationFrame] autorelease]; view.delegate = self; view.dataSource = self; view.animationStyle = RSCardsViewAnimationStyleExchange; // or RSCardsViewAnimationStyleDrop self.view = view;
vue-cli+elementUI：个人信息提交表格显示Demo
07-30
vue-cli+elementUI：个人信息提交表格显示Demovue-cli+elementUI：个人信息提交表格显示Demovue-cli+elementUI：个人信息提交表格显示Demo
个人信息-VUE模板 UNIAPP模板 布局、样式、JS分离
04-21
头像 姓名 吴福林 身份证 请填写身份证号 手机号码 13982056253 科室岗位 外科>主任医生 个人信息-VUE模板-UNIAPP模板 VUE模板 UNIAPP模板 布局、样式、JS分离
卡片式登录页面的完整后台管理系统模板（jquery）
09-26
登录页面为卡片式，经典bootstrap风格的一个完整的后台管理系统模板
android 切换卡的两种种形式
zhjianglin的专栏
06-13 2975
切换卡是一种相对其他布局有点复杂的布局，如果你在切换卡中嵌入过多的其他布局话，估计大家都头昏脑胀了 ，特别是新手开始学习选项卡的时候更是如此。现在我为大家理一理切换卡布局： 怎么样布局不详细说，相信学习过基本布局的朋友根据下面的提示就可以看出怎么写：值得注意的是TabHost的id可以为android:id="@android:id/tabhost" 也可以是自定义而TabWidget的id必须
和干瘪的列表说拜拜，看看卡片列表的精彩演绎
2401_82943878的博客
07-07 432
在移动UI设计中，卡片列表是一种常见的设计模式，可以将干瘪的列表变得更加生动和精彩。卡片列表通过使用卡片元素来呈现列表项，每个卡片可以包含图片、标题、描述、按钮等内容，使得列表项更加丰富和有趣。通过以上的精彩演绎方式，可以让移动UI设计中的卡片列表更加生动、有趣和吸引人，提升用户的体验和参与度。
15Bootstrap5卡片
醉瑾_的博客
12-10 384
15Bootstrap5卡片 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>菜鸟教程Bootstrap5卡片</title> <link rel="sty
Android实现京东快报信息滚动效果详解
这种效果通常用于新闻列表、通知推送等场景，通过动态切换内容卡片来模仿京东快报的页面滚动体验。开发者将学习到如何创建一个自定义的ViewFlipper类，该类继承自Android的ViewFlipper组件，同时实现了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值