html5手機端疊加圖片觸屏滑動查看特效



90 356 119



特效描述:html5手機端 疊加圖片 觸屏滑動查看特效,html5手機疊加圖片手指滑動查看

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">

2. 引入JS

<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src='js/stopExecutionOnTimeout.js?t=1'></script>

3. HTML代碼

<div class="slider">
	<div class="slide" ><img src="img/1.jpg" /><p>rutrum tellus a tempus :)</p></div>
	<div class="slide"><img src="img/3.jpg" /><p>litora torquent per conubia</p></div>
	<div class="slide"><img src="img/2.jpg" /><p>sed consectetur faucibus</p></div>
	<div class="slide" ><img src="img/4.jpg" /><p>eleifend tempus justo</p></div>
</div>
<script type="text/javascript">
window.addEventListener('load', onWndLoad, false);
function onWndLoad() {
	var slider = document.querySelector('.slider');
	var sliders = slider.children;
	var initX = null;
	var transX = 0;
	var rotZ = 0;
	var transY = 0;
	var curSlide = null;
	var Z_DIS = 50;
	var Y_DIS = 10;
	var TRANS_DUR = 0.4;
	var images = document.querySelectorAll('img');
	for (var i = 0; i < images.length; i++) {
		if (window.CP.shouldStopExecution(1)) {
			break;
		}
		images[i].onmousemove = function (e) {
			e.preventDefault();
		};
		images[i].ondragstart = function (e) {
			return false;
		};
	}
	window.CP.exitedLoop(1);
	function init() {
		var z = 0, y = 0;
		for (var i = sliders.length - 1; i >= 0; i--) {
			if (window.CP.shouldStopExecution(2)) {
				break;
			}
			sliders[i].style.transform = 'translateZ(' + z + 'px) translateY(' + y + 'px)';
			z -= Z_DIS;
			y += Y_DIS;
		}
		window.CP.exitedLoop(2);
		attachEvents(sliders[sliders.length - 1]);
	}
	function attachEvents(elem) {
		curSlide = elem;
		curSlide.addEventListener('mousedown', slideMouseDown, false);
		curSlide.addEventListener('touchstart', slideMouseDown, false);
	}
	init();
	function slideMouseDown(e) {
		if (e.touches) {
			initX = e.touches[0].clientX;
		} else {
			initX = e.pageX;
		}
		document.addEventListener('mousemove', slideMouseMove, false);
		document.addEventListener('touchmove', slideMouseMove, false);
		document.addEventListener('mouseup', slideMouseUp, false);
		document.addEventListener('touchend', slideMouseUp, false);
	}
	var prevSlide = null;
	function slideMouseMove(e) {
		var mouseX;
		if (e.touches) {
			mouseX = e.touches[0].clientX;
		} else {
			mouseX = e.pageX;
		}
		transX += mouseX - initX;
		rotZ = transX / 20;
		transY = -Math.abs(transX / 15);
		curSlide.style.transition = 'none';
		curSlide.style.webkitTransform = 'translateX(' + transX + 'px)' + ' rotateZ(' + rotZ + 'deg)' + ' translateY(' + transY + 'px)';
		curSlide.style.transform = 'translateX(' + transX + 'px)' + ' rotateZ(' + rotZ + 'deg)' + ' translateY(' + transY + 'px)';
		var j = 1;
		for (var i = sliders.length - 2; i >= 0; i--) {
			if (window.CP.shouldStopExecution(3)) {
				break;
			}
			sliders[i].style.webkitTransform = 'translateX(' + transX / (2 * j) + 'px)' + ' rotateZ(' + rotZ / (2 * j) + 'deg)' + ' translateY(' + Y_DIS * j + 'px)' + ' translateZ(' + -Z_DIS * j + 'px)';
			sliders[i].style.transform = 'translateX(' + transX / (2 * j) + 'px)' + ' rotateZ(' + rotZ / (2 * j) + 'deg)' + ' translateY(' + Y_DIS * j + 'px)' + ' translateZ(' + -Z_DIS * j + 'px)';
			sliders[i].style.transition = 'none';
			j++;
		}
		window.CP.exitedLoop(3);
		initX = mouseX;
		e.preventDefault();
		if (Math.abs(transX) >= curSlide.offsetWidth - 30) {
			document.removeEventListener('mousemove', slideMouseMove, false);
			document.removeEventListener('touchmove', slideMouseMove, false);
			curSlide.style.transition = 'ease 0.2s';
			curSlide.style.opacity = 0;
			prevSlide = curSlide;
			attachEvents(sliders[sliders.length - 2]);
			slideMouseUp();
			setTimeout(function () {
				slider.insertBefore(prevSlide, slider.firstChild);
				prevSlide.style.transition = 'none';
				prevSlide.style.opacity = '1';
				slideMouseUp();
			}, 201);
			return;
		}
	}
	function slideMouseUp() {
		transX = 0;
		rotZ = 0;
		transY = 0;
		curSlide.style.transition = 'cubic-bezier(0,1.95,.49,.73) ' + TRANS_DUR + 's';
		curSlide.style.webkitTransform = 'translateX(' + transX + 'px)' + 'rotateZ(' + rotZ + 'deg)' + ' translateY(' + transY + 'px)';
		curSlide.style.transform = 'translateX(' + transX + 'px)' + 'rotateZ(' + rotZ + 'deg)' + ' translateY(' + transY + 'px)';
		var j = 1;
		for (var i = sliders.length - 2; i >= 0; i--) {
			sliders[i].style.transition = 'cubic-bezier(0,1.95,.49,.73) ' + TRANS_DUR / (j + 0.9) + 's';
			sliders[i].style.webkitTransform = 'translateX(' + transX + 'px)' + 'rotateZ(' + rotZ + 'deg)' + ' translateY(' + Y_DIS * j + 'px)' + ' translateZ(' + -Z_DIS * j + 'px)';
			sliders[i].style.transform = 'translateX(' + transX + 'px)' + 'rotateZ(' + rotZ + 'deg)' + ' translateY(' + Y_DIS * j + 'px)' + ' translateZ(' + -Z_DIS * j + 'px)';
			j++;
		}
		document.removeEventListener('mousemove', slideMouseMove, false);
		document.removeEventListener('touchmove', slideMouseMove, false);
	}
}
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 拖動 拖拽 拖動插件 拖拽插件 疊加浮動層 層疊疊加 疊加層疊 層疊 疊加 加載更多 圖片拖動 圖片拖拽 圖片疊加 圖片層疊 圖片滑動 圖片滑塊
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子