javascript照片墙效果
<!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照片墙效果的更多相关文章
- Javascript动画效果（三）
Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...
- Javascript动画效果（一）
Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...
- Javascript动画效果（二）
Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...
- Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
- javascript 拖放效果
最近一直在看javascript的书籍,有些东西在书上看着貌似理解了,但是在真正动手实践时,其实有些细节你根本不了解.所以看起来就算是一个简单的效果,写起来也未必简单,就算写起来简单,写的代码也未必规 ...
- javascript动画效果之缓冲动画(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- javascript动画效果之透明度(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- javascript动画效果之匀速运动(修订版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- 使用CSS3动画实现绚丽的照片墙效果
临近毕业了,一大波毕业照又要来袭了!如何使用CSS3属性制作出自己的网页版照片墙呢? 闲话少说,先来看看效果图 效果要求: 1,照片要求有一定的白色边框. 2,照片都要有一定的倾斜角度. 3,鼠标移动 ...
随机推荐
- 记录Tomcat7.x热部署配置过程
我自己的开发版本是tomcat7.0.43+myeclipse14 原版在:http://blog.csdn.NET/chen_zw/article/details/8867779 热部署是指在你对项 ...
- git 命令记录
git log 配置 git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -% ...
- “XXX::Invoke”类型的已垃圾回收委托进行了回调。这可能会导致应用程序崩溃、损坏和数据丢失。向非托管代码传递委托时，托管应用程序必须让这些委托保持活动状态，直到确信不会再次调用它们。
症状描述如下: 如果将一个委托作为函数指针从托管代码封送到非托管代码,并且在对该委托进行垃圾回收后对该函数指针发出了一个回调,则将激活 callbackOnCollectedDelegate 托管调试 ...
- SharePoint 2013 SP1发布了
好消息,SharePoint 2013 SP1终于发布了: SP1说明:http://support.microsoft.com/kb/2880552 下载页面:http://www.microsof ...
- unity 读取文本与写入文本
void writeData(string str,string file) { string parth = Application.dataPath; Strea ...
- 浅谈oracle10G spfile与pfile（转）
转自:http://blog.csdn.net/onebigday/article/details/6108348,http://www.linuxidc.com/Linux/2012-11/7371 ...
- django 快速实现完整登录系统
django 实现完整登录系统 本操作的环境: =================== Windows 7 64 python3.5 Django 1.10 =================== 创 ...
- xml 配置文件规范 校验
背景:做的数据同步框架,数据同步种类通过xml配置文件添加.为了系统的稳定性,我们只能认为将来写这个运行配置xml的人是一个傻瓜,那么对xml格式校验就很重要. 通过dom4j,是可以完成对xml格式 ...
- sellsa
我看见天空很蓝 就像你在我身边的温暖 生命有太多遗憾 人越成长越觉得孤单 我很想飞 多远都不会累 才明白爱得越深心就会越痛 我只想飞 在我的天空飞 我知道你会在我身边 回忆的画面 记录的语言 爱始终是 ...
- js学习笔记（一）
js 有5中原始类型:number. string. boolean. null.undefined js 有6中类型: 5中原始类型 在加上1中Object类型 typeof null === 'o ...