<!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. 汇编语言学习与Makefile入门

    继续开发 ; hello-os ; TAB= ORG 0x7c00 ; 指明程序的装载地址 ; 以下的记述用于标准FAT12格式的软盘 JMP entry DB 0x90 DB "HELLO ...

  2. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  3. 04 Linux字符设备驱动

    一.结构体 1. cdev 结构体 struct cdev { struct kobject kobj; /* 内嵌的 kobject 对象 */ struct module *owner; /*所属 ...

  4. selenium之 定位以及切换frame（iframe）

    Set<String> windows = driver.getWindowHandles();        int count = 0;        for(String handl ...

  5. 函数指针_typedef

    一 函数指针 1 函数类型 函数的类型由它的返回值类型,和形参类型共通过决定,与函数名无关. eg:bool lengthcompare(const string&, const string ...

  6. 从零开始系列--R语言基础学习笔记之一 环境搭建

    R是免费开源的软件,具有强大的数据处理和绘图等功能.下面是R开发环境的搭建过程. 一.点击网址 https://www.r-project.org/ ,进入"The R Project fo ...

  7. Ubuntu 下安装 SQL Server 2016初探

    安装步骤参官方 https://docs.microsoft.com/zh-cn/sql/linux/sql-server-linux-setup-ubuntu 执行命令如下: .Enter supe ...

  8. 培训第四天-----jdbc连接oracle

    oracle链接数据库并向tableone插入中一条数据 package com.zjw.db; import java.sql.Connection; import java.sql.DriverM ...

  9. 第五届山东ACM大赛汇总

    A.angry_birds_again_and_again 简单积分: http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem& ...

  10. ZAM 3D 制作简单的3D字幕 流程(一)

    本文原地址-> http://www.cnblogs.com/yk250/p/5663048.html 效果参考图:请查阅 http://www.cnblogs.com/yk250/p/5662 ...