老师，我想知道为什么过渡的时候没有放大缩小效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>demo2</title>
<link rel="stylesheet" type="text/css" href="../js/swiper/idangerous.swiper2.7.6.css">
<style>
*{
margin: 0;
padding: 0;
}
html, body{
width: 100%；
height:100%;
}
.swiper-container{
width: 100%;
height: 100%;
}
.swiper-wrapper{
width: 100%;
height: 100%;
}
.swiper-slide{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="http://img1.sycdn.imooc.com/climg//59f2f3c60001e51206000600.jpg" alt="" style="height: 100%"></div>
<div class="swiper-slide"><img src="http://img1.sycdn.imooc.com/climg//59f2f3dc0001512e06000533.jpg" alt="" style="height: 100%"></div>
<div class="swiper-slide"><img src="http://img1.sycdn.imooc.com/climg//59f2f3fb0001725305000707.jpg" alt=""style="height: 100%"></div>
</div>
</div>
<script type="text/javascript" src='../js/swiper/idangerous.swiper2.7.6.min.js'></script>
<script type="text/javascript" src="../js/swiper/idangerous.swiper.progress.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container',{
progress:true,
onProgressChange: function(swiper){
for (var i = 0; i < swiper.slides.length; i++){
var slide = swiper.slides[i];
var progress = slide.progress;
swiper.setTransform(slide,'translate3d(0px,0,'+(-Math.abs(progress*1500))+'px)');
}
},
onTouchStart:function(swiper){
for (var i = 0; i < swiper.slides.length; i++){
swiper.setTransition(swiper.slides[i], 0);
}
},
onSetWrapperTransition: function(swiper, speed) {
for (var i = 0; i < swiper.slides.length; i++){
swiper.setTransition(swiper.slides[i], speed);
}
}
})
// Set Z-Indexes
for (var i = 0; i < swiper.slides.length; i++){
swiper.slides[i].style.zIndex = swiper.slides.length - i;
}
</script>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue，结合多个实战案例，还原真实开发场景，最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星