解锁"/>
swiper 实现滑动解锁
最近项目中有这样一个需求，研究了两种写法一个原生，一个使用框架
原生写法：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="css/huapin.css" /><!-- <link rel="stylesheet" href="css/swiper.min.css" />--><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"></head><body><div class="page2"><div class="silder_bg"><span>滑动滑动</span><!--滑动的白点--><img src="images/1closeLight.png" class="p2_bg1" /> //充当一个提示过度的效果<!--手滑动关闭图--><img src="images/2closeBar.png" id='silder' class="p2_bg2"/></div></div><div class="page3"></div></body><script src="js/zepto.js"></script><script>document.getElementById('silder').addEventListener('touchmove',function(event){ //使用touchmove监听滑动event.preventDefault();var el = event.target;var touch = event.touches[0];var curX = touch.pageX - this.offsetLeft - 73;if(curX <= 0) return;if(curX > 224){
//符合条件需要执行的事件$(".page2").hide();$(".page3").show();setTimeout(function(){p2show()},2000);}el.style.webkitTransform = 'translateX(' + curX + 'px)';//使其在x轴位移},false);document.getElementById('silder').addEventListener('touchend', function(event) { //使用touchend监听滑动结束this.style.webkitTransition = '-webkit-transform 0.3s ease-in';this.addEventListener( 'webkitTransitionEnd', function( event ) { this.style.webkitTransition = 'none'; }, false );this.style.webkitTransform = 'translateX(0px)';}, false);</script></html>
huapin.css:
*{border: 0;margin: 0;overflow: hidden;
}
html,body{width: 100%;height: 100%;
}
.page2{position: fixed;top: 0;left: 0;width: 100%;height: 100%;
}.page2>.bg2{position: fixed;top: 0;left: 0;height: 100vh;width: 100vw;background-color: #000000;opacity: 0.6;}
.silder_bg{width: 78vw;height: 10vh;position: absolute;top:5vh;left: 0;right: 0;margin: 0 auto;z-index:200;background-color: #F2F2F2;border-radius: 6vh;}.p2_bg1{width: 10vh;height: 10vh;position: absolute;top:0;left: 20vw;right: 0;z-index:400;animation: light 3s linear infinite;-webkit-animation:light 3s linear infinite;
}
/*滑动css3动画*/
@keyframes light{from{left:12vw;}to{left:60vw ;}
}
@-webkit-keyframes light{from{left:10vw;opacity: 0.4;}to{left:55vw ;opacity: 0.4;}
}.p2_bg2{width: 10vh;height: 10vh;position: absolute;top:0;left: 0;right: 0;z-index:200;}
.silder_bg span{width: 78vw;height: 5vh;position: absolute;top:3vh;left: 4vw;right: 0;z-index:200;font-family: "微软雅黑";font-size:14px ;text-align: center;
} 以上是原生的写法，还可以使用jq的拖拽（draggable）这个方法
下面说下使用swiper的写法
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Swiper Playground</title><link rel="stylesheet" href="css/swiper.min.css"><link rel="stylesheet" href="css/huapin.css" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><style>html,body {position: relative;height: 100%;}body {font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}.swiper-container {width: 100%;height: 100%;z-index: 300;}img {width: 100%;}.swiper-slide {z-index: 300;}.p2_bg {width: 10vh;height: 10vh;z-index: 300;}</style></head><body>
//html布局同上面，只是加了个swiper-container容器<div class="silder_bg"><span>滑动滑动</span><!--滑动的白点--><img src="images/1closeLight.png" class="p2_bg1" /><!--手滑动关闭图--><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"> //去掉swiper.min.css对swiper-slide的默认样式<img src="images/2closeBar.png" class="p2_bg" /></div></div></div></div><script src="js/zpto.js"></script><script src="js/swiper.min.js"></script><script>
简单思路：滑动swiper时监听滑动距离判断条件即可var swiper = new Swiper('.swiper-container', {slidesPerView: 'auto',freeMode: true,on: {touchMove: function() {// alert(swiper.translate)if(swiper.translate > 130) {
$(".silder_bg").fadeOut(500)}},},});</script></body></html> 以上两种写法，原生的实现起来互动的更加快速，swiper滑动的相对有弹性一点，所要监听的距离更短，也可实现效果
转载于:.html
更多推荐
swiper 实现滑动解锁
发布评论