移动端swiper卡片3D切换

最新推荐文章于 2024-07-02 22:14:33 发布

六_羽

最新推荐文章于 2024-07-02 22:14:33 发布

阅读量6.1k

点赞数 1

本文链接：https://blog.csdn.net/qq_26536483/article/details/78205260

版权

此效果在安卓自带浏览器上不支持背景模糊效果（浏览器无此属性），

且由于css中毛玻璃效果，导致背景图片切换会慢半拍。希望有大神看到能给我点解决办法。。。

实现效果地址：http://m.orunapp.com/m/act/info?id=167&from=singlemessage

实现过程：

借鉴swiper官网的demo效果：

http://www.swiper.com.cn/demo/choumei/

html代码：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="renderer" content="webkit">
<title>马上开跑</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/xxx.css"> //iconfont地址
<link rel="stylesheet" href="http://cdn.bootcss.com/weui/1.1.2/style/weui.min.css"/>
<link href="http://cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/layer/3.0.1/mobile/layer.min.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.4/css/swiper.min.css" />

<link rel="stylesheet" href="statics/css/app/runNow.css" />

<script>
$(function(){
(function(win,doc){
function change(){
doc.documentElement.style.fontSize=doc.documentElement.clientWidth/375*20+'px';
}
change();
win.addEventListener('resize',change,false);
})(window,document);
$('.blurBg').height($(window).height());

})
</script>
</head>
<body ontouchstart class="bg-f2-shop">
<img id="blur" class="blurBg blur" src=""/>




<div class="content">
<div class="swiper-container swiper-container-horizontal">
<div class="header col-4a fs-24"><span class="swiper_activePage"></span>/<span class="swiper_allPage"></span></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="po-r">
<div class="has_jl"></div>
<img src="statics/img/runNow_1.jpg" class="main-img">
</div>
<div class="bg-f w-87 br-b-r">
<p class="runNow_lineName col-4a fs-24">这里是标题标题这里是标题标题这里是标题标题</p>
<ul class="clearfloat runNow_lineInfo">
<li class="fl w-33">
<p class="runNow_lineInfo_title fs-14">哈哈</p>
<p class="runNow_lineInfo_title fs-18">哈哈</p>
</li>
<li class="fl w-34">
<p class="runNow_lineInfo_title fs-14">哈哈</p>
<p class="runNow_lineInfo_title fs-18"><span>3</span>个</p>
</li>
<li class="fl w-33">
<p class="runNow_lineInfo_title fs-14">哈哈</p>
<p class="runNow_lineInfo_title fs-18"><span>34</span>米</p>
</li>
</ul>
<div class="runNow_BtnBox">
<a class="runNow_Btn bg-theme">哈哈</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="po-r">
<img src="statics/img/runNow_1.jpg" class="main-img">
</div>
<div class="bg-f w-87 br-b-r">
<p class="runNow_lineName col-4a fs-24">这里是标题标题这里是标题标题这里是标题标题</p>
<ul class="clearfloat runNow_lineInfo">
<li class="fl w-33">
<p class="runNow_lineInfo_title fs-14">哈哈</p>
<p class="runNow_lineInfo_title fs-18">哈哈</p>
</li>
<li class="fl w-34">
<p class="runNow_lineInfo_title fs-14">哈哈</p>
<p class="runNow_lineInfo_title fs-18"><span>3</span>个</p>
</li>
<li class="fl w-33">
<p class="runNow_lineInfo_title fs-14">哈哈</p>
<p class="runNow_lineInfo_title fs-18"><span>哈哈</span>米</p>
</li>
</ul>
<div class="runNow_BtnBox">
<a class="runNow_Btn bg-theme">哈哈</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="po-r">
<div class="has_jl"></div>
<img src="statics/img/runNow_1.jpg" class="main-img">
</div>
<div class="bg-f w-87 br-b-r">
<p class="runNow_lineName col-4a fs-24">这里是标题标题这里是标题标题这里是标题标题</p>
<ul class="clearfloat runNow_lineInfo">
<li class="fl w-33">
<p class="runNow_lineInfo_title fs-14">哈哈</p>
<p class="runNow_lineInfo_title fs-18">哈哈</p>
</li>
<li class="fl w-34">
<p class="runNow_lineInfo_title fs-14">哈哈</p>
<p class="runNow_lineInfo_title fs-18"><span>3</span>个</p>
</li>
<li class="fl w-33">
<p class="runNow_lineInfo_title fs-14">哈哈</p>
<p class="runNow_lineInfo_title fs-18"><span>34</span>米</p>
</li>
</ul>
<div class="runNow_BtnBox">
<a class="runNow_Btn bg-theme">哈哈</a>
</div>
</div>
</div>
</div>

<div class="swiper-pagination" id="pagination"></div>
</div>


</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.4/js/swiper.min.js"></script>
<script src="statics/js/app/runNow.js"></script>
</body>
</html>

css代码：

/*reset*/
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color :rgba(0, 0, 0, 0);
-moz-tap-highlight-color :rgba(0, 0, 0, 0);
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
background-color: #fff;
height: 100%;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
margin:0 auto;
font-size: 14px;
}
input{
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
font-size: 14px;
}
* {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, {
font-weight:normal;
font-size:12px;
}
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-decoration: none;
color: #333;
}
i, em {
font-style: normal;
}
b, strong {
font-weight: normal;
}
li {
list-style: none;
}
ul, ol, dl,dt, dd {
margin: 0;
padding: 0;
}
img{ vertical-align:top; width: 100%;}
/*global*/
.fl{ float:left;}
.fr{float:right;}/* 浮动*/
.clearfloat:after{ display:block; content:""; clear:both;}
.clearfloat{ zoom:1;}/* 清浮动的兼容性写法*/
.txtElip{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }

.col-4a{ color: #4a4a4a; }
.bg-f{ background: #fff; }
.bg-theme{ background: #FA5858; }
.fs-12{ font-size: 0.6rem; }
.fs-14{ font-size: 0.7rem; }
.fs-18{ font-size: 0.9rem; }
.fs-24{ font-size: 1.2rem; }
.w-33{ width: 33%; }
.w-34{ width: 34%; }
.w-87{ width: 87%; margin: 0 auto; }
.br-b-r{
border-radius: 0 0 10px 10px;
}
.po-r{
position: relative;
}

/*swiper样式初始化*/
.swiper-container{
width:100%;
-webkit-perspective:1200px;
-moz-perspective:1200px;
-ms-perspective:1200px;
perspective:1200px;
}
.swiper-wrapper{margin-top:10px}
.swiper-slide{
width: 92%;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.swiper-slide .main-img{
width:87%;
margin:0 auto;
display:block;
border-radius: 10px 10px 0 0;
}

.blurBg{/* 背景硬件加速 */
width: 100%;
height: 100%;
transition-duration: 0ms;
transform: translate3d(0px, 0px, 0px);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.blur{/* 毛玻璃效果 */
filter: url(blur.svg#blur;); /* FireFox, Chrome, Opera */
-webkite-filter: blur(15px); /* Chrome, Opera */
-moz-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);
fiter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=20,MakeShdow=false); /* IE6~IE9 */
}
/*头部返回条*/
header{
position: absolute;
left: 0;
top: 0;
display: flex;
width: 100vw;
height: 40px;
justify-content: flex-start;
}
.go_back {
position: absolute;
top: 0;
left: 0;
width: 12.5vw;
height: 40px;
}
.go_back span {
display: inline-block;
width: 100%;
height: 100%;
color: #333;
text-align: center;
line-height: 40px;
}
.common-title {
width: 100%;
color: #333;
text-align: center;
line-height: 40px;
}
.header-right{
position: absolute;
top: 0;
right: 0;
width: 12.5vw;
height: 40px;
}
.header-right span{
display: inline-block;
*display: inline;
*zoom: 1;
width: 100%;
height: 100%;
background: url(../../images/app/icon_dws@4x.png) center no-repeat;
background-size: 0.9rem;
}
/*头部返回条结束*/
.content{
position: absolute;
top: 40px;
top: 0;
left: 0;
}
.header{
height: 68px;
line-height: 68px;
text-align: center;
}
.runNow_lineName{
font-weight: 300;
padding: 1rem 0.2rem 2.5rem;
height: 3rem;
line-height: 1.5rem;
overflow: hidden;
text-align: center;
}
.runNow_lineInfo{
padding-bottom: 1.75rem;
width: 100%;
}
.runNow_lineInfo_title{
height: 1.2rem;
line-height: 1.2rem;
text-align: center;
}
.runNow_BtnBox{
margin: 0 auto;
text-align: center;
width: 87%;
padding-bottom: 2rem;
}
.runNow_Btn{
display: inline-block;
*display: inline;
*zoom: 1;
width: 92%;
height: 2.2rem;
border-radius: 1.1rem;
line-height: 2.2rem;
color: #fff;
font-size: 0.8rem;
}
.rank{
margin: 0.5rem auto 0;
width: 2.5rem;
height: 2.5rem;
}
.rank_btn{
width: 100%;
height: 100%;
background: url(../../images/app/icon_phall@4x.png) no-repeat center;
background-size: 100%;
}
.has_jl{
position: absolute;
top: -0.1rem;
left: 2.1rem;
width: 1.25rem;
height: 3.1rem;
background: url(../../images/app/img_jl@4x.png) no-repeat;
background-size: 100%;
}

js代码：

六_羽

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端swiper卡片3D切换

此效果在安卓自带浏览器上不支持背景模糊效果（浏览器无此属性），且由于css中毛玻璃效果，导致背景图片切换会慢半拍。希望有大神看到能给我点解决办法。。。效果图如下大体实现效果：借鉴swiper官网的demo效果： http://www.swiper.com.cn/demo/choumei/html代码：
复制链接

扫一扫