图片旋转播放效果

最新推荐文章于 2021-06-05 01:52:38 发布

苹果没有皮

最新推荐文章于 2021-06-05 01:52:38 发布

阅读量502

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/janey_he/article/details/8631848

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html

<div class="container">
    <div class="message prev">11111111111111111111111111111111111111</div>
    <div class="message current">22222222222222222222222222222222222</div>
    <div class="message next">33333333333333333333333333333333333333</div>
    <div class="message">44444444444444444444444444444444444444</div>
</div>

css

.container{
	width: 460px;
	margin: 0 auto;
	position: relative;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
}
.message{
	display: block;
	position: absolute;
	left: 0;
	width: 482px;
	height: 360px;
	z-index: 0;
	background: red;
	visibility: hidden;
	background: #eeeeee;
	border: 1px solid black;
	-webkit-transition: -webkit-transform 1s, z-index 1s;
	-moz-transition: -moz-transform 1s, z-index 1s;
}
.prev{
	-webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);
	visibility: visible;
	z-index: 1;
}
.current{
	-webkit-transform: translateX(0px) translatedZ(-200px) rotateY(0deg);
	visibility: visible;
	z-index: 1;
}
.next{
	-webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);
	visibility: visible;
	z-index: 1;
}

jquery

$(function(){
	var $items =$(".message");
	var $itemsCount = $items.length;
	var leftItem, currentItem, rightItem;
	var current = 1;
	var leftCSS = {
		"-webkit-transform": "translateX(-350px) translateZ(-200px) rotateY(45deg)",
		"z-index": "1",
		"visibility": "visible"
	};
	var currentCSS = {
		"-webkit-transform": "translateX(0px) translateZ(0px) rotateY(0deg)",
		"z-index": "1",
		"visibility": "visible"
	};
	var rightCSS = {
		"-webkit-transform": "translateX(350px) translateZ(-200px) rotateY(-45deg)",
		"z-index": "1",
		"visibility": "visible"
	};
	var setItem = function(){
		$items.removeClass("prev").removeClass("next").removeClass("current").css({"visibility": "hidden","z-index": "1"});
		currentItem = $items.eq(current);
		leftItem = (current == 0) ? $items.eq($itemsCount - 1) : $items.eq(current - 1);
		rightItem = (current == ($itemsCount - 1)) ? $items.eq(0) : $items.eq(current + 1);
		currentItem.addClass("current").css(currentCSS);
		leftItem.addClass("prev").css(leftCSS);
		rightItem.addClass("next").css(rightCSS);
	} 
	$(".message").on("click", function(){
		if($(this).hasClass("prev")){
			if(current > 0){
				current--;
			} else {
				current = $itemsCount - 1;
			}
		}
		if($(this).hasClass("next")){
			if(current < $itemsCount-1){
				current++;
			} else {
				current = 0;
			}
		}
		setItem();
	});
});

只有两个module时js:

	function twoModulesEffect() {
		var $items = $(".history-list"), current = 0, leftBackCSS = {
			'transform' : 'translateX(134px) translateY(50px) translateZ(-10px) rotateY(8deg) rotateZ(-1deg)',
			'-webkit-transform' : 'translateX(134px) translateY(50px) translateZ(-10px) rotateY(8deg) rotateZ(-1deg)',
			'-moz-transform' : 'translateX(134px) translateY(50px) translateZ(-10px) rotateY(8deg) rotateZ(-1deg)',
			'width' : '465px',
			'height' : '580px',
			'z-index' : 10,
			'visibility' : 'visible',
			'background-size' : '465px 580px',
			'cursor' : 'pointer',
		}, leftFrontCSS = {
			'transform' : 'translateX(94px) translateY(1px) translateZ(-10px) rotateY(0deg)  rotateZ(-1deg)',
			'-webkit-transform' : 'translateX(94px) translateY(1px) translateZ(-10px) rotateY(0deg)  rotateZ(-1deg)',
			'-moz-transform' : 'translateX(94px) translateY(1px) translateZ(-10px) rotateY(0deg)  rotateZ(-1deg)',
			'width' : '530px',
			'height' : '620px',
			'z-index' : 999,
			'visibility' : 'visible',
			'background-size' : '530px 620px'
		}, rightBackCSS = {
			'transform' : 'translateX(590px) translateY(50px) translateZ(-10px) rotateY(-8deg)  rotateZ(1deg)',
			'-webkit-transform' : 'translateX(590px) translateY(50px) translateZ(-10px) rotateY(-8deg)  rotateZ(1deg)',
			'-moz-transform' : 'translateX(590px) translateY(50px) translateZ(-10px) rotateY(-8deg)  rotateZ(1deg)',
			'width' : '465px',
			'height' : '580px',
			'z-index' : 10,
			'visibility' : 'visible',
			'background-size' : '465px 580px',
			'cursor' : 'pointer',
		}, rightFrontCSS = {
			'transform' : 'translateX(502px) translateY(1px) translateZ(0px) rotateY(0deg) rotateZ(3deg)',
			'-webkit-transform' : 'translateX(502px) translateY(1px) translateZ(0px) rotateY(0deg) rotateZ(3deg)',
			'-moz-transform' : 'translateX(502px) translateY(1px) translateZ(0px) rotateY(0deg) rotateZ(3deg)',
			'width' : '530px',
			'height' : '620px',
			'z-index' : 999,
			'visibility' : 'visible',
			'background-size' : '530px 620px'
		};
		var setItem = function() {
			$items.removeClass("front").removeClass("back").removeClass(
					"currentBoard").css({
				"z-index" : 0,
				"visibility" : "hidden"
			});
			if (current == 0) {
				current = 1;
				$items.eq(0).addClass("back").css(leftBackCSS);
				$items.eq(1).addClass("front").addClass("currentBoard").css(
						rightFrontCSS);
			} else {
				current = 0;
				$items.eq(0).addClass("front").addClass("currentBoard").css(
						leftFrontCSS);
				$items.eq(1).addClass("back").css(rightBackCSS);
			}
		};
		$(".history").off("click", ".history-list").on("click", ".history-list", function() {
					setItem();
		});
	}