1.   本网站所有源码包解压密码:www.youhutong.com
会员登录  帮助问答

Jquery+css3,实现全屏撕裂幻灯片案例教程(zepto版本的 jquery.slitslider.js)【手机版】

小川 前端
查看演示  

Jquery+css3,实现全屏撕裂幻灯片案例教程【手机版】

(zepto版本的 jquery.slitslider.js)

 这是一款由jQuery 和 css3 打造而成的一个全屏的撕裂效果的幻灯片

在线查看效果时:如果你是用PC端,请用调式工具切换成手机如下面的效果一样

手机扫码查看效果:0.47563900 1492653546.jpg

001.jpg002.jpg003.jpg

【使用方法】:

第一步:导入SlitSlider.js

<script src="./js/zepto.min-fx-touch-zepto.SlitSlider.js"></script>

第二步:编辑我们的HTML

<body>

<div class="home homeOpen">
	<audio id="myaudio" autoplay="" loop=""><source  src="./images/kiss.mp3"></audio>
</div>

<div data-step="0" class="wrp">
	<div class="stage1 stage">
		<div>
			<img src="./images/1.jpg" alt="">
			<span class="title">第一副图</span>
			<span class="des">
				小川编程:http://www.youhutong.com/
			</span>
		</div>
	</div>

	<div class="stage2 stage" data-orientation="vertical">
		<div>
			<img src="./images/2.jpg" alt="">
			<span class="title">第二副图</span>
			<span class="des">
				我爱跳舞,我会跳舞,跳舞跳舞跳舞跳舞!
			</span>
		</div>
	</div>

	<div class="stage3 stage">
		<div>
			<img src="./images/3.jpg" alt="">
			<span class="title">第三副图</span>
			<span class="des">
				小川编程:http://www.youhutong.com/
			</span>
		</div>
	</div>

	<div class="stage4 stage" data-orientation="vertical">
		<div>
			<img src="./images/4.jpg" alt="">
			<span class="title">第四副图</span>
			<span class="des">
				小川编程:http://www.youhutong.com/
			</span>
		</div>
	</div>

    <div class="stage5 stage">
    	<div>
	    	<img src="./images/5.jpg" alt="" style="height:100%;">
	    	<span class="title">第五副图</span>
	    	<span class="des">
				小川编程:http://www.youhutong.com/
			</span>
	    </div>
    </div>

    <div class="stage6 stage" data-orientation="vertical">
    	<div>
	    	<img src="./images/6.jpg" alt="">
	    	<span class="des">
				小川编程:http://www.youhutong.com/
			</span>
	    </div>
    </div>
</div>

<div class="anniu"><a href="">查看详情</a></div>
<img class="arrup" src="./images/up.png" alt="">

</body>

第三步:调用SlitSlider.js的方法

下面JS中   .wrp .arrup .home 这三个class都是来自于HTML中自己定义的class哦)

<script>
	/*
	【参数】:
		speed:过度的速度(毫秒)
		orientation:'horizontal', //动画移动方向。horizontal:垂直,vertical:水平
	    easing: 'ease-in-out',    // the easing function
	    scale:1,                  //图片缩放大小
	    rotateZ:0,                //图片旋转角度
	    opacity:1,                //图片透明度
	    maxTrans:200              //图片最大移动距离
	*/
	var sslider = $('.wrp').SlitSlider({speed:1000,rotateZ:180});
	$(document).swipeUp(function () {
		sslider.next();
	});
	$(document).swipeDown(function () {
		sslider.prev();
	});
	$('.arrup').on('click',function(){
		sslider.next();
	});
	$(document).on('touchmove',function(e){e.preventDefault();});
	$(sslider).on('nextOver',function(){console.log('nextover');});
	$(sslider).on('prevOver',function(){console.log('prevover');});
	//背景音乐(播放 暂停)按钮
	$(document).ready(function(){
	  var myAuto = document.getElementById('myaudio');
	  $(".home").click(function(){
		  if(myAuto.paused){
		  	myAuto.play();
		  	$(this).addClass('homeOpen');
		  }else{
		  	myAuto.pause();
		  	$(this).removeClass('homeOpen');
		  }
	   });
	});				
</script>

【说明:】

在编辑HTML的时候,有的幻灯片DIV我们加一了一个属性data-orientation:

data-orientation : 这个是用来定义动画移动方向的(撕裂方向)

当然你看到有几个没有添加那就是用的默认:horizontal。

当然你也可以再加别的属性到DIV中去(属性名得正确),SlitSlider.js都会自动去获取。

下面是可以添加的属性:

data-orientation :  动画移动方向。horizontal:垂直,vertical:水平

data-easing        :  the easing function

data-speed         :  过度的速度(毫秒) 

data-scale           :  图片缩放大小

data-rotateZ       :  图片旋转角度

data-opacity       :  图片透明度

data-maxTrans   :  图片最大移动距离



 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
立即下载源码  
【温馨提示】源码包解压密码:www.youhutong.com
如果你觉得这篇教程的内容对你有帮助、请支持本站谢谢!  点击进入捐赠通道

转载请注明来源地址:小川编程 » https://www.youhutong.com/index.php/article/index/152.html

( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情