圖片3d輪放查看效果
來源：程序員人生 發布時間：2014-09-17 02:56:29 閱讀次數：2004次
本功能比較簡單，就是一個大幕，左右滾動播放圖片。
關鍵點在于如何實現平滑的滾動，包括動畫效果，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>
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
