<!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. SDWebImage总结

    SDWebImage 支持异步的图片下载+缓存,提供了 UIImageView+WebCache的 category,方便使用. 优点:首先NSURLCache是缓存原始数据(raw data)到磁盘 ...

  2. html_博客博主

    csdn: 工匠若水 http://blog.csdn.net/yanbober yunama: IT蓝豹:http://www.itlanbao.com/: http://ask.dcloud.ne ...

  3. centos6.3(64位) 安装apr

    安装apr来提高tomcat 的可伸缩性和性能 ? 1 cd /usr/local/ 1  下载apr 和 apr-util最新版 ? 1 2 3 wget  http://apache.fayea. ...

  4. PHP常用函数总结(不定期更新)

    array_merge函数和两个数组相加的区别 array_merge函数,在出现相同的索引数组,会把两个数组中的索引数组,进行融合,以第一个数组的索引最大值往后相加,如果是关联数组,后面数组的值覆盖 ...

  5. [DFNews] EnCase v7.08发布

    EnCase v7.08 近日正式发布,7.08增加了Evidence Processor Manager以及Evidence Processor,不仅可以在本地实现证据处理队列,也支持了通过网络进行 ...

  6. win10 chrome浏览器字体小，模糊

    解决方案: chrome://flags/

  7. http://paulgraham.com/arcfaq.html

    Why not use some other delimiter than parentheses?为什么不使用一些其他的分隔符比括号?We tried various possibilities. ...

  8. sencha touch打包成安装程序

    为了更好地向大家演示如何打包一个sencha touch的项目,我们用sencha cmd创建一个演示项目,如果你的sencha cmd环境还没有配置,请参照 sencha touch 入门系列 (二 ...

  9. listview 的适配器 getview 随着软件健盘显示和隐藏，出现多个空的position问题

    AndroidManifest 里配置 android:windowSoftInputMode="stateHidden|adjustPan" listview的宽高设置成fill ...

  10. Mutex

    #include "stdafx.h" #include <string> #include <iostream> #include <Windows ...