html5手机端叠加图片触屏滑动查看特效



85 336 113



特效描述: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

加群请备注:从官网了解到