<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>锤子-直播照片墙拖拽技术-网站开发-网页特效</title>
  <style type="text/css">
	*{margin:0;padding:0;}
	body{background:#000000;/*背景填充*/overflow:hidden;}
	#perspective{perspective:700px;/*眼球看舞台的远近*/transform-style:preserve-3d;position:relative;transform: rotateX(14deg) translateY(302px);}
	#wrap{
		width:200px;/*宽度*/
		height:250px;/*height高度*/
		margin:200px 50%;/*auto*/
		transform:translateZ(100px);
		transform-style:preserve-3d;/*置为3D空间*/
		position:absolute;
		left:0;
		top:100%;

	}
	#wrap img{
		width:100%;
		height:100%;
		position:absolute;/*绝对定位*/
		border-radius:5px;/*设置圆角*/
		box-shadow:1px 0 10px #fff;/*阴影*/

		-webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%);
	}
	/*#wrap img:nth-child(1){
		/*变形 ？ 旋转 rotate  缩放scale 位移translate
		transform:rotateY(0deg) translateZ(600px);
	}
	#wrap img:nth-child(2){

		transform:rotateY(33deg) translateZ(600px);
	}
	#wrap img:nth-child(3){

		transform:rotateY(66deg) translateZ(600px);
	}*/

  </style>
 </head>
 <body>
	<!---
		锤子-照片墙拖拽技术-网站开发-网页特效
		如果没有基础来学技术加学习群：539400920要学习下基础教材
		如果没有基础来学技术加学习群：539400920要学习下基础教材
		1、创建舞台
		2、在舞台创建场景
	-->
	<div id="perspective">
		<div id="wrap">

			<img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241635554.jpg" alt="梦柯教育" />
			<img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636000.jpg" alt="梦柯教育" />
			<img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636163.jpg" alt="梦柯教育" />
			<img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636272.jpg" alt="梦柯教育" />
			<img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636304.jpg" alt="梦柯教育" />
			<img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636331.jpg" alt="梦柯教育" />
			<img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636374.jpg" alt="梦柯教育" />
			<img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636414.jpg" alt="梦柯教育" />
			<img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636452.jpg" alt="梦柯教育" />
			<img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636484.jpg" alt="梦柯教育" />
			<img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636163.jpg" alt="梦柯教育" />

		</div>
	</div>
	<script type="text/javascript">
		window.onload =function(){
			var oWrap = document.getElementById("wrap");
			var oImg = oWrap.getElementsByTagName("img");
			var oDeg = 360/oImg.length;	//算得我们每张图片旋转的度数

			var nowX , lastX , nowY , lastY , minusX=0 , minusY = 0;
			var roX = -10;var roY = 0;
			var timer = null;

			//循环
			for (var i=0;i<oImg.length ;i++ )//i= 0+1=1  i=1+1=2
			{
				oImg[i].style.transform ='rotateY('+i*oDeg+'deg) translateZ(700px)';
				//transition 延迟的效果
				oImg[i].style.transition = 'transform 1s '+ (oImg.length-1-i)*0.1+'s'
			};
			marTop()
			function marTop(){
				var wH = document.documentElement.clientHeight;
				oWrap.style.marginTop = wH/2 -200 +"px";
			}
			document.onmousedown = function(ev){
				ev = ev || window.event;//
				//鼠标按下时候、给赋值
				lastX = ev.clientX;
				lastY = ev.clientY;
				this.onmousemove = function(ev){
					ev = ev || window.event;
					nowX = ev.clientX; //重新记录我们现在按下的坐标X
					nowY = ev.clientY;//重新记录我们现在按下的坐标Y
					minusX = nowX - lastX;//移动过后的坐标 移动之前坐标差值X

					minusY = nowY - lastY;//移动过后的坐标 移动之前坐标差值Y
					roX += minusX*0.2;
					roY -= minusY*0.1;

					oWrap.style.transform = "rotateY("+roX+"deg)";

					lastX = nowX ;
					lastY = nowY;
					//console.log(nowX)
				};
				this.onmouseup =function(){
					this.onmousemove = null;
					timer = setInterval(function(){
						minusX *=0.95;
						roX += minusX*0.2;
						oWrap.style.transform = "rotateY("+roX+"deg)";
						if (Math.abs(minusX)<0.1)
						{
							clearInterval(timer)
						}
					},13)

				}

			       return false;
			};
		};
	</script>
 </body>
</html>

　　

javascript照片墙效果的更多相关文章

  1. Javascript动画效果（三）

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  2. Javascript动画效果（一）

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  3. Javascript动画效果（二）

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...

  4. Javascript动画效果（四）

    Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...

  5. javascript 拖放效果

    最近一直在看javascript的书籍,有些东西在书上看着貌似理解了,但是在真正动手实践时,其实有些细节你根本不了解.所以看起来就算是一个简单的效果,写起来也未必简单,就算写起来简单,写的代码也未必规 ...

  6. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  7. javascript动画效果之透明度(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  8. javascript动画效果之匀速运动(修订版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  9. 使用CSS3动画实现绚丽的照片墙效果

    临近毕业了,一大波毕业照又要来袭了!如何使用CSS3属性制作出自己的网页版照片墙呢? 闲话少说,先来看看效果图 效果要求: 1,照片要求有一定的白色边框. 2,照片都要有一定的倾斜角度. 3,鼠标移动 ...

随机推荐

  1. exp导出做成批处理注意事项

    不能叫exp.bat,会一直显示导出这句话. 出现EXP-00106: 数据库链接口令无效:是因为http://blog.csdn.net/hzfu007/article/details/189823 ...

  2. Windows 服务关闭自动重启

    此方法可以用来监控Windows Service是否运行良好 1.创建批处理程序,判断服务是否启动,若未启动则启动之 @echo off Rem Look for the Print Spooler ...

  3. Shade Exaple1

    Shader "Custom/Diffuse Texture" { Properties { _MainTex ("Base (RGB)", 2D) = &qu ...

  4. LeetCode 328. Odd Even Linked List

    Given a singly linked list, group all odd nodes together followed by the even nodes. Please note her ...

  5. IOS 判断耳机插入/拔出

    一. 方式 1.注册监听 //注册监听耳机设备的插入/拔出 AudioSessionAddPropertyListener (kAudioSessionProperty_AudioRouteChang ...

  6. C++设计模式-Mediator中介者模式

    Mediator中介者模式作用:用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. UML如下: Colleage抽象同事类 ...

  7. 同一服务器上多个版本的 sqlserver　，如何连接，改变某一实例的端口号

    1. SQL Server配置管理器,双击“TCP/IP” 2. TCP/IP设置 确定后重启SQL Server服务,打开SQL Server Management Studio,服务器名称输入12 ...

  8. 多个DLL合并成一个DLL

    多个DLL合并成一个DLL,把DLL合并到Exe中的解决方案 1:) 下载 http://download.microsoft.com/download/1/3/4/1347C99E-9DFB-425 ...

  9. http国际化模拟请求

    现在好多系统都有国际化的需求.不同国家的人读到不同的语言数据.那么怎么模拟请求的时候区分是哪个国家的语言信息,代码说明. HttpPost methed = new HttpPost("模拟 ...

  10. js截取url的参数（转自。。）

    用JS获取地址栏参数的方法(超级简单) 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) {      var reg ...