美文网首页程序员互联网科技
个人信息卡片列表样式切换页面详解

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

作者: iimT | 来源:发表于2016-12-02 17:10 被阅读1368次

#先随便说说

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

效果图

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

#HTML结构

还是简单的HTML结构(我写的HTML结构都很简单哈哈)

HTML结构

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

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

#简单的思路

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

OK 获取这两个按钮:

编写了一个getByClassName的一个函数可以用通过类名来获取元素,这个函数的编写可以参考前一篇文章《用原生JS写getByClassName方法》
遵循一个原则最好不用id所以我没有用id去定义这两个按钮,这个建议也给所有共同学习前端的同学。PS:但是我在判断当前的时候用了id所以别喷我哈哈所以我还是渣渣

** 题外话,步入正题。**

#正题-获取元素绑定事件

var switchBar=document.getElementById('switch');//获取父元素
var list=switchBar.getElementsByTagName('a')[0];//获取第一个a按钮-列表按钮
var car=switchBar.getElementsByTagName('a')[1];//获取第二个a按钮-卡片按钮

我们要编写个方法,然后点击这两个按钮的时候执行更换样式的方法。

list.onclick=changeSwitchClass;
car.onclick=changeSwitchClass;

#正题-更换样式的方法

好啦,我们现在只要写好这个方法就行了。
有按钮被点击了,我们首先要知道是哪个按钮被点击了通过判断this.id执行不同的操作。看代码和详细的不能再详细的注释。PS:写注释是一个好习惯。

//忘了说 con-big就是卡片样式 con-small是列表样式

function changeSwitchClass(e){
  if(this.id=="btn-car-off"){
    //现在被点击的是卡片按钮,说明原来是小的列表
    //所以我们获取所有class为con-small的元素并且更改元素
    var itmes = getByClassName(all,"con-small");

    this.id="btn-car-on";//小图标有不同的背景图 卡片按钮的图标变亮
    list.id="btn-list-off";//同上 也就是列表按钮的图标变灰

    //接下来就是循环给所有的li更换class
    for (var i = itmes.length - 1; i >= 0; i--) {
      itmes[i].className = "con-big";
    }
  }else if(this.id=="btn-list-off"){
    //参考上面
    var itmes = getByClassName(all,"con-big");
    this.id="btn-list-on";
    car.id="btn-car-off";
    for (var i = itmes.length - 1; i >= 0; i--) {
      itmes[i].className="con-small";
    }
  }
}

OK,结束了,引入JS就OK咯

#结束以及-Github链接

我叫掏粪--个人博客

这个小东西的源码在github的地址:卡片列表样式切换信息展示效果

如果你喜欢我就给我点个赞哟~

相关文章

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

    #先随便说说 先来看看长什么样子(动态图可能加载会慢一点): 先看怎么写,源码放在了github上本文最后会有链接...

  • principle初学笔记1

    卡片是交互循环动效: 1.在sketch制作出所需页面样式,步骤简便,不做详解 2.将card1组设置Driver...

  • 仿探探滑屏交互

    探探滑屏交互 页面布局: 样式设置 动画实现通过js实现卡片样式的初始化 touch事件 滑屏移出卡片 效果预览:...

  • 详解微信小程序Radio选中样式切换

    详解微信小程序Radio选中样式切换 本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式。效果如下: ...

  • 适配iOS 13

    1、presentViewController出来的页面,默认是卡片样式的,可以下滑移除,如果不想使用卡片模式,可...

  • Flutter 保持页面缓存 保持页面状态

    在默认情况下页面切换走时会被销毁,页面切换回来时会被重新创建,如果页面中有列表那么整个列表将会被重新创建,降低了用...

  • CSS 列表样式详解

    CSS列表用于前端的列表排列。 CSS列表属性作用如下: 设置不同的列表项标记为有序列表设置不同的列表项标记为无序...

  • React.js virtual dom机制遇到的问题

    在项目中有这样一个案例,是做一个卡片列表,每个卡片可以理解为一张银行卡,具体样式如下图: 卡片列表外部是一个Div...

  • 仿掘金项目首页制作

    分类管理 样式美化 首页布局 样式美化 支持响应式 html页面头部添加 文章列表 样式美化 右侧边栏----用户...

  • layaBox:列表list使用selectHandler监听点

    IDE制作的ui文件: 部分代码: 效果图: 理想效果:切换左边的列表,进行切换右边的列表数据实际效果:点击页面完...

网友评论

    本文标题:个人信息卡片列表样式切换页面详解

    本文链接:https://www.haomeiwen.com/subject/efdqmttx.html