可滑动的悬浮卡片
从swiper官网下载swiper插件
悬浮可滑动卡片.PNG
<!DOCTYPE html>
<html>
<head>
<title>滑动悬浮卡片</title>
</head>
<script type="text/javascript" src="./swiper.js"></script>
<script type="text/javascript" src="./aliIndex.js"></script>
<body>
<div class="margin">
<div class=" home-container swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide ">
<div class="ss">
<div class="card-color" >
<div class="tit"><label>卡片1</label></div>
<div class="info-top card-top-border" id="customerFlow"><span>实时数据</span><span class="top-num" id="customerTotal">NaN</span><i></i></div>
<div class="info"><span class="top-num" id="customerAverageWork">N/A</span><i></i><span>月平均数据</span></div>
<div class="info"><span class="top-num" id="customerAverage">N/A</span><i></i><span>日平均数据</span></div>
</div>
<div class="card-main">
<ul class="font-box font-box-margin-max">
<li><span><i class="icon icon-iconfkzt"></i>总量状态</span><span class="num">暂无</span></li>
<li><span><i class="icon icon-yetaizongbishuzhanbi"></i>有效占比</span><span class="num" id="customerEffective">N/A</span></li>
<li><span><i class="icon icon-tubiaoshangshengqushi"></i>激增量</span><span class="num">暂无</span></li>
<li><span><i class="icon icon-tubiaoxiajiangqushi"></i>骤弱量</span><span class="num">暂无</span></li>
</ul>
<button class="center">进入详情</button>
</div>
</div>
</div>
<div class="swiper-slide ">
<div class="ss">
<div class="card-color" >
<div class="tit"><label>卡片2</label></div>
<div class="info-top card-top-border" id="customerFlow"><span>实时数据</span><span class="top-num" id="customerTotal">NaN</span><i></i></div>
<div class="info"><span class="top-num" id="customerAverageWork">N/A</span><i></i><span>月平均数据</span></div>
<div class="info"><span class="top-num" id="customerAverage">N/A</span><i></i><span>日平均数据</span></div>
</div>
<div class="card-main">
<ul class="font-box font-box-margin-max">
<li><span><i class="icon icon-iconfkzt"></i>总量状态</span><span class="num">暂无</span></li>
<li><span><i class="icon icon-yetaizongbishuzhanbi"></i>有效占比</span><span class="num" id="customerEffective">N/A</span></li>
<li><span><i class="icon icon-tubiaoshangshengqushi"></i>激增量</span><span class="num">暂无</span></li>
<li><span><i class="icon icon-tubiaoxiajiangqushi"></i>骤弱量</span><span class="num">暂无</span></li>
</ul>
<button class="center">进入详情</button>
</div>
</div>
</div>
<div class="swiper-slide ">
<div class="ss">
<div class="card-color" >
<div class="tit"><label>卡片3</label></div>
<div class="info-top card-top-border" id="customerFlow"><span>实时数据</span><span class="top-num" id="customerTotal">NaN</span><i></i></div>
<div class="info"><span class="top-num" id="customerAverageWork">N/A</span><i></i><span>月平均数据</span></div>
<div class="info"><span class="top-num" id="customerAverage">N/A</span><i></i><span>日平均数据</span></div>
</div>
<div class="card-main">
<ul class="font-box font-box-margin-max">
<li><span><i class="icon icon-iconfkzt"></i>总量状态</span><span class="num">暂无</span></li>
<li><span><i class="icon icon-yetaizongbishuzhanbi"></i>有效占比</span><span class="num" id="customerEffective">N/A</span></li>
<li><span><i class="icon icon-tubiaoshangshengqushi"></i>激增量</span><span class="num">暂无</span></li>
<li><span><i class="icon icon-tubiaoxiajiangqushi"></i>骤弱量</span><span class="num">暂无</span></li>
</ul>
<button class="center">进入详情</button>
</div>
</div>
</div>
</div>
<div class="pag-position swiper-pagination"></div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="stylesheet" type="text/css" href="./swiper.css">
<script type="text/javascript">
(function swiper() {
homeSwiper = new Swiper('.home-container', {
loop: false,
centeredSlides: true,
slidesPerView: 1.5,
initialSlide: 1,
pagination: {
el:'.swiper-pagination',
clickable:true,
},
observer: true,
observeParents: true
});
})();
</script>
</body>
</html>
css样式 style.css(iconfont下载)
)
/*清除样式*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
html {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
body {
margin: 0;
padding: 0;
width: 100%;
font-size: 12px!important;
background: #dddddd;/*ebe9ea*/
}
form, ul, ol, li, input {
padding: 0;
}
ul, ol, li {
list-style: none;
margin: 0;
}
a {
text-decoration: none;
}
img, input, button {
border: none;
outline: none;
background: none;
}
p {
margin: 0;
}
b {
font-weight: normal;
}
.clearfix:after {
display: block;
content: ".";
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
.hide {
display: none;
}
/*icon*/
@font-face {font-family: "iconfont";
src: url('../font/iconfont.eot?t=1547108258189'); /* IE9 */
src: url('../font/iconfont.eot?t=1547108258189#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMg......AA=') format('woff2'),
url('../font/iconfont.woff?t=1547108258189') format('woff'),
url('../font/iconfont.ttf?t=1547108258189') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('../font/iconfont.svg?t=1547108258189#iconfont') format('svg'); /* iOS 4.1- */
}
.icon {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-iconfkzt:before {
content: "\e60d";
}
.icon-yetaizongbishuzhanbi:before {
content: "\e66d";
}
.icon-tubiaoshangshengqushi:before {
content: "\e790";
}
.icon-tubiaoxiajiangqushi:before {
content: "\e791";
}
.body{
width:100%;
height: 100%;
/*渐变色开始*/
/*background: -webkit-linear-gradient(to bottom,#001033,#005893);*/
/*background: -webkit-gradient(to bottom,#001033,#005893);*/
/*background: linear-gradient(to bottom,#001033,#005893);*/
/*background: -moz-linear-gradient(to bottom,#001033,#005893);*/
/*filter: progid:DXImageTransform.Microsoft.gradient(GradienType=0,startColorstr=#001033,endColorstr=#005893);*/
/*渐变色结束*/
transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);
transition-duration: 0ms;
/*transform: translate(0px, 0px) translateZ(0px);*/
}
.margin{
width: 100vw;
height: 100vh;
background-color: #2f3551;
}
.home-container {
padding-top: 1.75rem !important;
}
.card-color{
width: 5.94rem;
height: 5.1rem !important;
border-radius: .06rem;
background-color: #3b415a;
position: absolute;
top: 0;
left: .23rem;
box-shadow: .13rem .13rem .13rem rgba(0,0,0, 0.15);
padding: 0 .4rem;
font-size: 0;
}
/*卡片滑动特效*/
.ss {
width:100%;
position: relative;
padding-top: 3.6rem;
}
.swiper-slide .ss{
-webkit-transition: transform 1.0s;
-moz-transition: transform 1.0s;
-ms-transition: transform 1.0s;
-o-transition: transform 1.0s;
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
.swiper-slide-active .ss,.swiper-slide-duplicate-active .ss{
transform: scale(1);
-ms-transform: scale(1); /* IE 9 */
-moz-transform: scale(1); /* Firefox */
-webkit-transform: scale(1); /* Safari 和 Chrome */
-o-transform: scale(1);
}
.none-effect {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
}
/******************************************/
/*卡片内容*/
.tit{
padding-top: .3rem;
text-align: center;
font-size: .37rem;
color: #ccc;
margin-bottom: 1rem;
}
.tit label {
position: relative;
}
.tit label:before {
content: '';
width: 1.2rem;
height: .027rem;
position: absolute;
top: .21rem;
left: -1.5rem;
background-color: #ccc;
}
.tit label:after {
content: '';
width: 1.2rem;
height: .027rem;
position: absolute;
top: .21rem;
right: -1.5rem;
background-color: #ccc;
}
.info-top {
padding: 0 .24rem .45rem;
font-size: .32rem;
color: #fbf5f5;
overflow: hidden;
letter-spacing: 2px;
}
.card-top-border {
border-bottom: 1px solid rgba(194, 206, 229, .6);
}
.info{
width: 50%;
margin-top: .26rem;
font-size: .32rem;
color: #fbf5f5;
text-align: center;
box-sizing: border-box;
overflow: hidden;
display: inline-block;
}
.info + .info {
border-left: 1px solid rgba(194, 206, 229, .6);
}
.info span {
width: 100%;
text-align: center;
line-height: 0.88rem;
}
.top-num {
font-size: .37rem;
color: #ff8420;
float: right;
text-align: right;
}
#customerTotal,
#businessTotal {
position: relative;
}
#customerTotal i,
#businessTotal i {
color: #ff8420;
position: absolute;
font-style: normal;
font-size: .32rem;
animation: myUpmoveT 2s ease infinite;
-moz-animation: myUpmoveT 2s ease infinite;
-webkit-animation: myUpmoveT 2s ease infinite;
-o-animation: myUpmoveT 2s ease infinite;
left: -.5rem;
}
.card-main {
width: 7.2rem;
/*height: 7.05rem;*/
border-radius: .06rem;
background-color: #fff;
box-shadow: 0.08rem 0.08rem 0.08rem rgba(0,0,0,.25);
padding-top: 2rem;
}
.font-box{
width: 100%;
color: #565656;
}
.font-box-margin-max {
margin-bottom: 1.6rem;
}
.font-box-margin-min {
margin-bottom: .6rem;
}
.font-box li{
height: 1.04rem;
padding: 0 .4rem;
line-height: 1.04rem;
font-size: .32rem;
}
.font-box li:nth-child(even){
background-color: #fbfbfb;
}
.font-box li span i{
font-size: .43rem;
margin-right: .5rem;
color: #959ca4;
}
.num{
float: right;
text-align: right;
}
.center{
width: 100%;
height: .97rem;
text-align: center;
color: #565656;
font-size: .32rem;
}
button a{
width: 100%;
height: .97rem;
line-height: .97rem;
font-size: .4rem;
background-color: #3b415a;
color: #fff;
display: block;
}
.swiper-container .pag-position {
position: fixed;
bottom: .5rem;
}
网友评论