<!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. 使用jedis操作redis

    一 连通性 1. 简单代码测试连通性 Jedis jedis = new Jedis(".......", 6379); String keys = "name" ...

  2. TortoiseSvn客户端出现Http state 405 'Method Not Allowed' 的解决办法

    原文地址链接 http://stackoverflow.com/questions/28247512/visualsvn-server-3-2-unexpected-http-status-405 就 ...

  3. [SQL]复制数据库某一个表到另一个数据库中

    SQL:复制数据库某一个表到另一个数据库中 SELECT * INTO 表1 FROM 表2 --复制表2如果只复制结构而不复制内容或只复制某一列只要加WHERE条件就好了 例子:SELECT * I ...

  4. Career path of Bioinformatics

    Core services: Reward bioinformaticians http://www.nature.com/news/core-services-reward-bioinformati ...

  5. LeetCode 169. Majority Element

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  6. NSURLConnection使用

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  7. selenium 介绍1

    本文主要是吸收这些帖子的营养,多谢互联网,和未知名作者. http://www.ltesting.net/ceshi/open/kygncsgj/selenium/2011/1009/203318.h ...

  8. 转载-------makefile 使用总结

    转载自:http://www.cnblogs.com/wang_yb/p/3990952.html 1. Makefile 简介 Makefile 是和 make 命令一起配合使用的. 很多大型项目的 ...

  9. C#实用技能篇

    Redis配置文件详解 如果不指定配置文件,redis也可以启动,此时,redis使用默认的内置配置.不过在正式环境,常常通过配置文件[通常叫redis.conf]来配置redis. redis.co ...

  10. js拖动层原形版

    脚本文件: function JzDrag(moveDivId, moveDivHandle) { // var me = this; this.M = false; //是否在移动对象 this.D ...