swiper 3D 覆盖流的使用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>MIss HY</title>
<link rel="stylesheet" href="http://m.hurongclub.com/Resource/css/base_new.css">
<link rel="stylesheet" href="http://m.hurongclub.com/Resource/css/swiper.min.css">
<script src="http://m.hurongclub.com/Resource/js/zepto.min.js"></script>
<script>
//计算根节点HTML的字体大小
function htmlFontsize(){
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 750){
deviceWidth = 750;
}
document.documentElement.style.fontSize = deviceWidth / 7.5 + "px";
}
//根节点HTML的字体大小初始化
htmlFontsize(); $(window).resize(function(){
htmlFontsize();
});
</script>
<style>
body{background: #f4664b;font-size:.14rem;}
.swiper-container{height:8.2rem;}
#investproSwiper{margin-top: 0.52rem;}
#investproSwiper .swiper-slide{width:5rem;height:7.25rem;}
#investproSwiper .swiper-slide .investpro{width:4.61rem;height:6.37rem;background-size: 100% 100%;background-repeat: no-repeat;margin-top: 0.58rem;margin-left: 0.19rem;-webkit-transition: all 0.5s linear;}
#investproSwiper .swiper-slide-active .investpro{width:5.16rem;height:7.25rem;margin-left:-.08rem;margin-top:.12rem;}
#investproSwiper .swiper-slide .hrplan_slide{background-image: url(images/hrplan_small.png);}
#investproSwiper .swiper-slide-active .hrplan_slide{background-image: url(images/hrplan_big.png);}
#investproSwiper .swiper-slide .newhand_slide{background-image: url(images/newhand_small.png);}
#investproSwiper .swiper-slide-active .newhand_slide{background-image: url(images/newhand_big.png);}
#investproSwiper .swiper-slide .sxm_slide{background-image: url(images/sxm_small.png);}
#investproSwiper .swiper-slide-active .sxm_slide{background-image: url(images/sxm_big.png);}
.swiper-slide a{width:3.8rem;height: .7rem;background: #eb4e39;display: block;font-size: .36rem;color: #fff;text-align: center;line-height: .7rem;border-radius: .08rem;position: absolute;left: 0;right: 0;margin: auto;bottom: .85rem;z-index: 2;}
.swiper-slide-active .investpro a{width: 4.33rem;height: .8rem;line-height: .8rem;bottom: .4rem;}
.swiper-container-horizontal>.swiper-pagination{height:.5rem;text-align:center;bottom:0;}
.swiper-pagination-bullet{background:#fff;border-radius:50%;width:.12rem;height:.12rem;margin-left:.18rem;opacity:1;}
.swiper-pagination-bullet-active{background:#e04531;}
.investproTab{width:4.6rem;height:6.37rem;position: absolute;top: 0.58rem;z-index: 2;opacity: 0;}
.investpro-prev{left:-3.6rem;}
.investpro-next{right:-3.6rem;}
</style>
</head>
<body>
<div class="swiper-container" id="investproSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="investpro newhand_slide"><a href="##">立即投资</a></div>
</div>
<div class="swiper-slide">
<div class="investpro sxm_slide"><a href="##">立即投资</a></div>
</div>
<div class="swiper-slide">
<div class="investpro hrplan_slide"><a href="##">立即投资</a></div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="investproTab investpro-prev" id="investpro-prev"></div>
<div class="investproTab investpro-next" id="investpro-next"></div>
</div>
<script src="http://m.hurongclub.com/Resource/js/swiper-3.2.5.min.js"></script>
<script>
var abcSwiper = new Swiper("#investproSwiper", {
slidesPerView: 'auto', //设置slider容器能够同时显示的slides数量
centeredSlides: true, //设定为true时,活动块会居中,而不是默认状态下的居左。
loop: true,
speed: 500,
noSwiping: false, //设置为true时禁止切换
paginationClickable: false,
pagination : '.swiper-pagination',
prevButton:'#investpro-prev',
nextButton:'#investpro-next'
});
</script>
</body>
</html>
swiper 3D 覆盖流的使用方法的更多相关文章
- Swiper 3D flow轮播使用方法
swiper 的3d轮播效果,移动端适用 (1). 如需使用Swiper的3d切换首先加载3D flow插件(js和css). <head> <link rel="styl ...
- Java中FileOutputStream流的write方法
本文为大家分享了FileOutputStream流的write方法,供大家参考,具体内容如下 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- 检验实时3D像素流送平台好坏的七个标准!(上)
将交互式3D像素流送技术作为有价值的企业工具之后,就该寻找像素流送服务供应商了.问题在于交互式3D像素流送是一种新兴技术,因此很难知道要问供应商的正确问题.在开始使用之前,这里有7个问题,您应该从候选 ...
- java 21 - 6 字符缓冲流的特殊方法以及该方法高效复制文件
字符缓冲流的特殊方法: A.BufferedWriter: public void newLine():根据系统来决定换行符 private static void write() throws IO ...
- Npoi Web 项目中(XSSFWorkbook) 导出出现无法访问已关闭的流的解决方法
原本在CS项目中用的好好的在BS项目中既然提示我导出出现无法访问已关闭的流的解决方法 比较郁闷经过研究 终于解决了先将方法发出来 让遇到此问题的筒子们以作参考 //新建类 重写Npoi流方法 publ ...
- java字符流操作flush()方法及其注意事项
java字符流操作flush()方法及其注意事项 flush()方法介绍 查阅文档可以发现,IO流中每一个类都实现了Closeable接口,它们进行资源操作之后都需要执行close()方法将流关闭 ...
- 使用对象作为hashMap的键,需要覆盖hashcode和equals方法
1:HashMap可以存放键值对,如果要以对象(自己创建的类等)作为键,实际上是以对象的散列值(以hashCode方法计算得到)作为键.hashCode计算的hash值默认是对象的地址值. 这样就会忽 ...
- 在linux下的使用复制命令cp,不让出现“overwrite”(文件覆盖)提示的方法。(转)
在linux下的使用复制命令cp,不让出现“overwrite”(文件覆盖)提示的方法. 一般我们在使用cp命令时加上-f选项,希望不让出现“overwrite”的提示(文件覆盖的提示).如:# cp ...
- Chem 3D模型的参数值更改方法
在化学绘图软件ChemOffice 15.1中有个专门用于绘制三维结构的组件,就是Chem 3D.通过这个组件用户可以绘制3D模型并可以通过这个组件来计算一些化学数据.在使用Chem 3D组件过程中, ...
随机推荐
- ubuntu搭建开发环境踩坑实录
谨以此文,记录和ubuntu系统不死不休的搏斗过程,后续待补. 1.双系统安装,windows采用uefi模式安装(优启通可制作uefi的win10安装盘),ubuntu不要划分boot区,而应该划分 ...
- STM32F4 LTDC学习
很久没有写东西了,也很久没看文档了吼吼,觉得有点无聊,找来F4看看,主要看F429.督促自己多看多记录. 首先配置同步时序先看参考手册 下面看一个实际例子,一块439的开发板 设置: LTDC_Ini ...
- UI:sqlite数据库
使用sqllite的时候一些笔记 数据库(管理类),在工程 general 导入 动态链接库 libsqllite3.0.dylib 在.h文件里引入导入 sqllite3.h 头文件 在.h里面声 ...
- bzoj 1601: [Usaco2008 Oct]灌水【最小生成树】
挺有意思的思路 如果不能自己打井,那么就是MST裸题了,考虑转换一下,自己打井就相当于连接一口虚拟的井(地下水?),所有井i到这口井的距离是w[i],这样把所有边排个序跑MST即可 #include& ...
- 第四章 朴素贝叶斯法(naive_Bayes)
总结 朴素贝叶斯法实质上是概率估计. 由于加上了输入变量的各个参量条件独立性的强假设,使得条件分布中的参数大大减少.同时准确率也降低. 概率论上比较反直觉的一个问题:三门问题:由于主持人已经限定了他打 ...
- jenkins一次构建两次触发job问题
具体内容详见: https://issues.jenkins-ci.org/browse/JENKINS-21464?focusedCommentId=250183&page=com.atla ...
- BZOJ 3224 SBT 普通平衡树
复习了一下SBT的模板,但是BZOJ不知道为什么注册不了,所以就没交,测了样例能过! #include <bits/stdc++.h> #include<algorithm> ...
- AsyncTask官方教程-推荐用AsyncTask少用Thread
Using AsyncTask AsyncTask allows you to perform asynchronous work on your user interface. It perform ...
- PHP 官方说明
http://php.net/manual/en/mysqli.affected-rows.php The above examples will output: Affected rows (INS ...
- 221 Maximal Square 最大正方形
在一个由0和1组成的二维矩阵内,寻找只包含1的最大正方形,并返回其面积.例如,给出如下矩阵:1 0 1 0 01 0 1 1 11 1 1 1 11 0 0 1 0返回 4. 详见:https://l ...