<!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. Hbase数据导入导出

    平时用于从生产环境hbase到导出数据到测试环境. 导入数据: import java.io.BufferedReader; import java.io.File; import java.io.F ...

  2. 为什么在ucos向stm32f103移植时说os_cpu_c.c中有三个函数如OS_CPU_SysTickInit()需要注释掉

    我在看os_cpu_c.c代码时对下面这段话困惑了半天总是在百度的帮助下找到了答案 /*  申明几个函数,这里要注意最后三个函数需要注释掉,为什么呢?    OS_CPU_SysTickHandler ...

  3. Git使用培训

    1.VS“扩展和更新”菜单,NuGet 2.通过“扩展和更新”,联机搜索git,安装“Git Extensions”和“Git Source Control Provider” 3.通过Git命令配置 ...

  4. 使用Visual Studio调试用户模式进程（Debugging a User-Mode Process Using Visual Studio）

    由于本人能力有限,翻译不足之处敬请谅解,欢迎批评指正:sunylat@163.com Visual Studio版本:Visual Studio 2015企业版,中文环境. MSDN原文:https: ...

  5. dedecms 图片集上传时提示错误信息“(FILEID:1|2|3..)“的解决

    网上看到很多朋友遇到使用织梦程序一段时间后,发现上传图集时候老是失败,提示"提示FILEID:X错误,缩略图显示为红色Error"下面截图错误: 这问题今天也让我头疼了半天,好好的 ...

  6. [CF442A] Borya and Hanabi (暴力bitmask)

    题目链接:http://codeforces.com/problemset/problem/442/A 题目大意:给你n张卡片,你知道这n张卡片都是什么,但是不知道他们的位置.你每次可以请求朋友指出一 ...

  7. 怎么创建一个Database快照

    How to create the database Snapshot: use mastergoif not exists (select * from sys.databases where na ...

  8. extentreports报告插件与testng集成(一)

    前段时间在群里有人说了下用这个插件来生成测试报告,发现生成的报告非常不错.就下来学习了一下,并集成到了testng上,下面来分享一下: ExtentReports (by Anshoo Arora) ...

  9. tr:even 与tr:odd

    :even匹配所有索引值为偶数的元素,从 0 开始计数查找表格的1.3.5...行(即索引值0.2.4...)<table> <tr><td>Header 1< ...

  10. 关于Python3爬虫抓取网页Unicode

    import urllib.requestresponse = urllib.request.urlopen('http://www.baidu.com')html = response.read() ...