<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue.js+css3多张银行卡展开收缩切换特效</title>
<style>
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
.clearfix:after {
display: block;
clear: both;
content: ''
}
.fl{
float:left;
}
.fr{
float:right;
}
.main {
width: 250px;
/* height: 550px; */
margin:0px auto;
padding:0px 15px;
position:relative;
}
.box{
position: relative;
top:20px;
transition: all linear .2s
}
.newBox{
top:340px !important;
}
.box li {
font-size: 14px;
width: 100%;
position: absolute;
z-index: 0;
transition: all linear .2s
}
.box li .itemMain {
border-radius: 5px;
padding: 15px;
}
.box .newItem{
transition: top linear .2s;
top:-320px !important;
}
.bankLogo {
border-radius: 50%;
background: #fff;
text-align: center;
width: 30px;
height: 30px;
float: left;
}
.bankLogo img {
vertical-align: middle;
width: 20px;
height: 20px;
margin: 5px;
}
.bankInfo {
float: left;
margin-left: 10px;
}
.bankInfo p {
font-size: 12px;
color: #ffffff9c;
}
.bankInfo p:first-child {
font-size: 16px;
color: #fff;
}
.bankNum {
float: right;
margin-top: 10px;
color: #fff;
}
.bottom {
margin-top: 30px;
}
.bottom p {
float: right;
color: #fff;
font-size: 12px;
}
.itemContent{
background:#f0f0f085;
font-size:12px;
position:absolute;
top:132px;
left:15px;
right:15px;
border:1px solid #257bf6;
border-radius:0px 0px 8px 8px;
border-top:none;
}
.itemContent dd{
position:relative;
padding:10px 15px;
color:#666;
}
.itemContent dd:not(:last-child)::after{
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
right:10px;
bottom: 0;
left:10px;
border-bottom: 1px solid #257bf6;
-webkit-transform: scaleY(.1);
transform: scaleY(.1);
}
.itemContent dd img{
vertical-align:sub;
width:16px;
height:16px;
}
.itemContent dd span{
margin-left:10px;
}
.itemBtn{
position:absolute;
bottom:-340px;
left:50%;
margin-left:-25px;
width:50px;
height:14px;
text-align:center;
border:1px solid #bfbfbf3b;
border-bottom:none;
border-radius:20px 20px 0px 0px;
}
.itemBtn img{
width:16px;
height:16px;
vertical-align:top;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="main">
<ul class="box" id="box" :class='{newBox:itemIndex!== null}'>
<li v-for="(item,index) in list" :key="index" :class="{newItem:itemIndex==item.index}" @click="itemClick(index)">
<div class="itemMain" :style="{background:item.bankBg}">
<div class="top clearfix">
<div class="bankLogo">
<img :src='item.bankLogo' />
</div>
<div class="bankInfo">
<p>{{item.name}}</p>
<p>{{item.bankType}}</p>
</div>
<div class="bankNum">
<p>**** {{item.bankNum}}</p>
</div>
</div>
<div class="bottom clearfix">
<p>每日限额{{item.limitNum}}万</p>
</div>
</div>
</li>
</ul>
<dl class="itemContent" id="itemContent" v-show="itemIndex!== null?true:false">
<dd v-for="(items,index) in bankList" :key="index" >
<div class="clearfix">
<img class="fl" :src="items.itemUrl">
<span class="fl">{{items.itemName}}</span>
<img class="fr" src="img/jt.svg">
</div>
</dd>
</dl>
<div class="itemBtn" v-show="itemIndex!= null?true:false" @click="btnClick">
<img src="./img/xjt.svg">
</div>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data() {
return {
bankList:[
{itemUrl:'img/zz.svg',itemName:'去转帐'},
{itemUrl:'img/sx.svg',itemName:'扣款顺序'},
{itemUrl:'img/zd.svg',itemName:'账单明细'},
{itemUrl:'img/yh.svg',itemName:'银行服务'},
{itemUrl:'img/ks.svg',itemName:'其他'}
],
list: [{
index: 0,
name: '建设银行',
bankLogo: 'img/jianhang.svg',
bankBg: "#3973c4",
bankType: '储蓄卡',
bankNum: '0234',
limitNum: '20',
},
{
index: 1,
name: '工商银行',
bankLogo: 'img/gongshang.svg',
bankBg: "#fe6063",
bankType: '储蓄卡',
bankNum: '0158',
limitNum: '50'
},
{
index: 2,
name: '农业银行',
bankLogo: 'img/nonghang.svg',
bankBg: "#32977f",
bankType: '储蓄卡',
bankNum: '0353',
limitNum: '40'
}
],
itemList: [],
itemIndex:null,
btnIndex:null
}
},
mounted:function(){
var oBox = document.getElementById('box');
var aLi = oBox.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].style.top=60*i+'px';
aLi[i].style.zIndex=i;
}
},
methods: {
btnClick(){
var oBox = document.getElementById('box');
var aLi = oBox.getElementsByTagName('li');
if(this.itemIndex==null){
this.itemIndex=this.btnIndex;
}else{
this.itemIndex=null;
for(var i=0;i<aLi.length;i++){
aLi[i].style.top=i*60+'px';
aLi[i].style.zIndex=i;
}
}
},
itemClick(index) {
var oBox = document.getElementById('box');
var aLi = oBox.getElementsByTagName('li');
var oContent=document.getElementById('itemContent');
oContent.style.borderColor=this.list[index].bankBg;
this.itemList=[];
this.btnIndex=index;
if(this.itemIndex==null){
this.itemIndex=index;
for(var k=0;k<aLi.length;k++){
this.itemList.push(k)
}
this.itemList.splice(index,1)
for(var i in this.itemList){
aLi[this.itemList[i]].style.top=60*i+'px';
aLi[this.itemList[i]].style.zIndex=i;
}
}else{
this.itemIndex=null
for(var i=0;i<aLi.length;i++){
aLi[i].style.top=60*i+'px';
aLi[i].style.zIndex=i;
}
}
}
}
})
</script>
</body>
</html>
vue.js+css3多张银行卡展开收缩切换特效.zip （12个子文件） 
js 
vue.js 345KB img 
jianhang.svg 1KB sx.svg 2KB zz.svg 4KB gongshang.svg 920B zd.svg 4KB yh.svg 3KB nonghang.svg 4KB ks.svg 5KB jt.svg 922B xjt.svg 759B
index.html 6KB资源评论
码云笔记
- 粉丝: 3w+
- 资源: 5852
最新资源
- 机械设计大型举重机卷绳机sw17可编辑非常好的设计图纸100%好用.zip
- 机械设计单片式离合器sw20可编辑非常好的设计图纸100%好用.zip
- 英飞凌TC系列旋变软解码开发，含程序与电路
- 抖音自动点赞自动滚屏app
- 有源电力滤波器APF仿真，ip-iq谐波电流检测和无功电流检测 matlab simlink仿真 滞环控制 PI控制 很适合用于初学者学习 了解电能质量研究方向可用于电能质量相关的基础仿真控制
- mmexport1735898743184.mp4
- 项目简单，适合新手入门（飞翔的小鸟java源代码）
- 机械设计单柱巷道式堆垛机（sw16可编辑+cad）非常好的设计图纸100%好用.zip
- mmexport1735898729052.mp4
- 机械设计电脑光驱组件自动贴膜设备sw17非常好的设计图纸100%好用.zip
- comsol二维裂隙流压裂水平井
- 机械设计复合铜换热器组装机_step非常好的设计图纸100%好用.zip
- AW35616 linux驱动
- 反步法 PID（backstepping）控制算法下的USV（无人船 艇）路径跟踪控制方案(考虑洋流扰动) Norrbin Fossen模型＋LOS制导+PID 反步法控制 Matlab Simuli
- 机械设计电液滑环（sw15可编辑+工程图）非常好的设计图纸100%好用.zip
- 机械设计滚轮跳动度检查step非常好的设计图纸100%好用.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
