zoukankan      html  css  js  c++  java
  • 图片3d轮放查看效果

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

    关键点在于怎样实现平滑的滚动,包含动画效果,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);*/
    	 100px;
    	height: 100px;
    	z-index: -1;
    }
    .button {
    	position: absolute;
    	top:253px;
    	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;
    	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>


  • 相关阅读:
    百度点聚合功能,自定义针头功能
    iOS之极光推送
    iOS之短信认证
    iOS FMDB
    iOS 远程推送
    iOS之本地推送(前台模式与后台模式)
    iOS指纹识别
    关于——GCD
    关于——NSThread
    给label text 上色 && 给textfiled placeholder 上色
  • 原文地址:https://www.cnblogs.com/cxchanpin/p/7070443.html
Copyright © 2011-2022 走看看