基于Zepto的内容滑动插件:zepto.hwSlider.js

helloweba.com 作者:月光光 时间:2016年07月07日 17:27 标签: Zepto  CSS3  内容滑动 

前段时间为给大家介绍了内容滑动插件:hwSlider.js,它是兼容PC和移动端的,但是是基于jQuery的。有朋友最近给我说要求把Zepto版的也放出来,于是乎就整了个zepto版的内容滑动插件,它同样支持PC和移动端,可以滑屏和自适应屏幕大小。

Zepto由于它体积小,提供了与jQuery几乎相同的API,确实在移动端可以替代庞大的jQuery库。那么开发zepto插件和jquery插件稍微有点不同,具体可以看这篇文章:http://www.tuicool.com/articles/AZ77j2。本文我们在前文hwSlider-内容滑动切换效果(三):jquery.hwSlide.js插件封装的基础上,将jQUery版的插件改成Zepto版。

HTML

HTML部分很简单,一个滑块列表#hwslider。


<div id="hwslider" class="hwslider">
	<ul>
		<li class="active"><img src="images/s1.jpg" alt="1" width="100%"></li>
		<li><a href="#"><img src="images/s2.jpg" alt="2" width="100%"></a></li>
		<li><h4>Helloweba</h4></li>
	</ul>
</div>

在页面中载入Zepto库文件以及插件js,然后调用插件。


<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
<script src="js/zepto.hwSlider.js"></script>
<script>
$(function(){
	$("#hwslider").hwSlider({
		autoPlay: false, //是否自动播放
		dotShow: true,	//是否显示圆点导航
		touch: true //是否支持触摸滑屏切换
	});
});
</script>

CSS

这里提供最基本的CSS,将滑块内容布局好。


.hwslider{width: 100%;height:auto;min-width:280px;min-height: 160px;margin:20px auto; position: relative; overflow: hidden;}
.hwslider ul{width: 100%; height:100%; position: absolute; z-index: 1}
.hwslider ul li{display:none;position:absolute; left:0; top:0; width: 100%;height:100%; overflow: hidden;}
.hwslider ul li.active{display: block;}
.hwslider ul li img{width:100%;max-width: 100%; height:auto;display: block}
.dots{position: absolute; bottom:20px; left:200px; min-width:60px; height: 12px; z-index: 2;}
.dots span{float: left; width:12px;height: 12px; border: 1px solid #fff; border-radius: 50%; background: #333; margin-right: 8px; cursor: pointer;}
.dots span.active{background:orangered}
.arr{display:none;position: absolute; top: 140px; z-index: 2;width: 40px; height: 40px; line-height: 38px; text-align: center;; font-size: 36px; background: rgba(0,0,0,.3); color: #fff; text-decoration: none}
.arr:hover{background: rgba(0,0,0,.7); text-decoration: none;}
.hwslider:hover .arr{display: block; text-decoration: none;color: #fff}
.prev{left: 20px}
.next{right: 20px}

那么在这里我要说明的是,Zepto一般用在移动端,zepto也提供了类似jQuery的animate动画函数,但是据说新能比较差,而且需要另外调用。所以在移动端的动画效果我们提倡使用CSS3动画来实现。

CSS3的animate与关键帧动画keyframes结合完全可以实现性能优良的动画效果。


.movein_right{
	-webkit-animation: slidein_right .5s forwards ease-in;
	animation:slidein_right .5s forwards ease-in;
}
.moveout_right{
	-webkit-animation: slideout_right .5s forwards ease-in;
	animation:slideout_right .5s forwards ease-in;
}
.movein_left{
	-webkit-animation: slidein_left .5s forwards ease-in;
	animation:slidein_left .5s forwards ease-in;
}
.moveout_left{
	-webkit-animation: slideout_left .5s forwards ease-in;
	animation:slideout_left .5s forwards ease-in;
}

@-webkit-keyframes slidein_left{
	from {
		-webkit-transform: translateX(-100%);
	}
	to {
		-webkit-transform: translateX(0);
	}
}

@keyframes slidein_left {
	from {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	to {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
@-webkit-keyframes slideout_left{
	from {
		-webkit-transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(100%);
	}
}

@keyframes slideout_left {
	from {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
}


@-webkit-keyframes slidein_right{
	from {
		-webkit-transform: translateX(100%);
	}
	to {
		-webkit-transform: translateX(0);
	}
}

@keyframes slidein_right {
	from {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	to {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
@-webkit-keyframes slideout_right{
	from {
		-webkit-transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(-100%);
	}
}

@keyframes slideout_right {
	from {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

Zepto

那么在实现滑块切换的时候,我们通过Zepto的addClass()方法将css中的左右滑动动画class加入到对应的滑块元素中就可以了。另外需要注意的是zepto下的手势触屏事件touchstart和touchend略要处理下。

其实zepto插件和jquery插件格式基本相同,我们可以直接拿hwSlider-内容滑动切换效果(三):jquery.hwSlide.js插件封装中的jquery.hwSlider.js来修改。这里我就偷个懒,不解释,代码也不贴到文章里了,太占篇幅了,有兴趣请直接下载源码拿去用。

声明:本文为原创文章,helloweba.com和作者拥有版权,如需转载,请注明来源于helloweba.com并保留原文链接:https://www.helloweba.com/view-blog-374.html

0条评论

顶部 反馈 二维码 底部
扫一扫

扫描二维码用手机看文章