图片3d轮放查看效果

标签：style   blog   os   io   ar   for   2014   art   div   

本功能比较简单，就是一个大幕，左右滚动播放图片。

关键点在于如何实现平滑的滚动，包括动画效果，3d效果等。

<style>

img {
	position: absolute;
	top:200;
	left:400px;
/*	border: 1px solid #333;*/
	padding: 2px 5px 2px 5px;
	-webkit-transition:ease all 0.7s;
	-webkit-transform-origin: 50% 50% 600px;
/*	background: rgba(0,0,0,.3);*/
	width: 100px;
	height: 100px;
	z-index: -1;
}
.button {
	position: absolute;
	top:253px;
	width:20px;
	height: 60px;
	background: rgba(0,0,0,.3);
	padding-top:40px;
	vertical-align: middle;
	text-align: center;
	z-index: 2;
}
.button:hover {
	cursor: pointer;
}
.left {
	left:130px;
}
.right {
	left:870px;
}

.layerhidden {
	position: absolute;
	top:220px;
	width:160px;
	height: 200px;
	background: white;
	vertical-align: middle;
	text-align: center;
	z-index: 1;
}
.layerleft {
	left:0px;
}
.layerright {
	left:850px;
}
</style>
<script>
var imgs;
var leftStart=0;
var showLength=7;
var step = 0;
function init() {
	imgs = document.getElementsByTagName("img");
	reshowImgs();
}
function turnLeft(){
	if(leftStart>0) {
		leftStart--;
		step++;
		reshowImgs();
	}
	else {
		alert("左边没有照片");
	}
}
function turnRight(){
	if(leftStart+showLength<imgs.length) {
		leftStart++;
		step--;
		reshowImgs();
	}
	else {
		alert("右边没有照片");
	}
}

function delayTransform(ind, yDeg)
{
	imgs[ind].style.webkitTransform = "perspective(500px) rotateY("+yDeg+"deg)";
}
function delayDisplay(ind,display)
{
	imgs[ind].style.display = display;	
}

function reshowImgs() {
	var deg = Math.floor(showLength / 2);
	var timeDelay = 700;
	
	for(var i=0;i<leftStart;i++)
	{
		imgs[i].style.webkitTransform = "perspective(500px) rotateY("+(deg+leftStart-i)*10+"deg)";
		setTimeout("delayDisplay("+i+",'none')",500);	
	}
	for(var i=leftStart; i< leftStart+showLength;i++)
	{
		imgs[i].style.display = "block";
		setTimeout("delayTransform("+i+","+(deg-(i-leftStart))*10+")",timeDelay/10);
	}
	for(var i=leftStart+showLength;i<imgs.length;i++)
	{
		imgs[i].style.webkitTransform = "perspective(500px) rotateY("+(deg-i)*10+"deg)";
		setTimeout("delayDisplay("+i+",'none')",500);
	}
	
}
</script>
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
<img src="4.png" />
<img src="5.png" />
<img src="6.png" />
<img src="7.png" />
<img src="8.png" />
<img src="9.png" />

<div id="left_button" class="button left" onclick="turnLeft()" style=""><</div>
<div id="right_button" class="button right" onclick="turnRight()" style="">></div>

<div class="layerhidden layerleft"></div>
<div class="layerhidden layerright"></div>
<script>
init();
</script>

图片3d轮放查看效果

标签：style   blog   os   io   ar   for   2014   art   div   

原文地址：http://blog.csdn.net/aperson111/article/details/38920849