3d拖拽相册
来源：互联网 发布：怎么发淘宝店铺链接 编辑：程序博客网 时间：2024/04/30 00:16
<!--
BY 前端大队长 www.mogubolg.win
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D拖拽相册</title>
<style type="text/css">
body{
background-color:#000;
}
*{
padding:0px;
margin:0px;
}
#perspective{
perspective: 1000px; /*设置视角距舞台的距离还可已设置是否透视，默认为否*/
}
#wrap{
width:133px; /*外包装*/
height:200px;
position:relative;
top:0;
left:0;
margin:50px auto;
transform-style:preserve-3D;
transform:rotateX(-10deg);
}
#wrap img{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
border-radius:6px;
box-shadow:0px 0px 15px #00FA9A;
box-reflect:below 6px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));/*倒影*/
-webkit-box-reflect:below 6px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));/*倒影*/
-moz-box-reflect:below 6px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); /*很遗憾，火狐不支持*/
cursor:pointer; /*手型*/
}
</style>
</head>
<body>
<div id="perspective"> <!-- 相当于舞台 -->
<div id="wrap"> <!-- 相当于外包装 -->
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="10.jpg"/>
<img src="11.jpg"/>
</div>
</div>
<script type="text/javascript">
/*
总结：
首先将每个图片赋值一个不同的角度和一个偏移位置
然后在拖放时实时更新这个角度和偏移量
在拖放结束时逐渐减小这个角度和偏移量
也可以做成只在平面转动的，只要不改变rotateX就行
*/
window.onload =function(){
var wrapDom = document.querySelector("#wrap"); //获取wrap
var imgDom = document.getElementsByTagName("img");//获取wrapimg
var wrap = document.getElementById('wrap');
var len = imgDom.length;//获取img的长度
var imgDeg = 360/len; //平分360度
for(var i=0;i<len;i++){ //分别赋值每个img一个rotateY(沿Y轴转动)和translateZ(偏移位置)
imgDom[i].style.transform= "rotateY("+i*imgDeg+"deg) translateZ(350px)";
imgDom[i].style.transition ="transform 1s "+(len-1-i)*0.2+"s";
}
var lastx,lasty,nowx,nowy,changeX,changeY,roX=-10;roY=0; //初始化新旧鼠标坐标 每次改变坐标大小 和rotateX和rotateY初始值
center(); //执行函数
window.onresize =center;//当缩放窗口时调用函数
function center(){ // 垂直居中啊
var mt = window.innerHeight/2-wrapDom.offsetHeight; //获取窗口高度除以二再减去容器高度=容器顶距窗口顶的距离
wrapDom.style.cssText = "margin-top:"+mt+"px";
}
setTimeout(function(){
wrap.style.backgroundImage = "url(.1.jpg)";
},2000)
document.onmousedown = function(e){
clearInterval(timer)
var timer = null;
var ev = e||window.event;//兼容事件
lastx = ev.clientX; //当前鼠标位置
lasty = ev.clientY;
this.onmousemove = function(e){
clearInterval(timer)
var ev = e||window.event;
var nowx = ev.clientX; //现在鼠标位置
var nowy = ev.clientY;
changeX=nowx-lastx; //x轴变化了多少
changeY=nowy-lasty;//y轴变化了多少
roY+=changeX*0.1;//调节转的速度
roX-=changeY*0.1;//调节转的速度
wrapDom.style.transform="rotateX("+roX+"deg) rotateY("+roY+"deg)"; //赋值新的rotateX和rotateY
lastx=nowx; //将旧的数据更新
lasty=nowy; //将旧的数据更新
}
this.onmouseup = function(){
this.onmousemove = null;//取消移动事件
timer=setInterval(function(){//设定时器逐渐减小rotateX和rotateY
changeX*=0.95; //每30毫秒rotateX减少5%
changeY*=0.95;//每30毫秒rotateY减少5%
roY+=changeX*0.2; //调节转的速度
roX-=changeY*0.2; //调节转的速度
wrapDom.style.transform="rotateX("+roX+"deg) rotateY("+roY+"deg)";//赋值新的rotateX和rotateY
},30)
}
return false; //取消默认事件
}
}
</script>
</body>
</html>
BY 前端大队长 www.mogubolg.win
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D拖拽相册</title>
<style type="text/css">
body{
background-color:#000;
}
*{
padding:0px;
margin:0px;
}
#perspective{
perspective: 1000px; /*设置视角距舞台的距离还可已设置是否透视，默认为否*/
}
#wrap{
width:133px; /*外包装*/
height:200px;
position:relative;
top:0;
left:0;
margin:50px auto;
transform-style:preserve-3D;
transform:rotateX(-10deg);
}
#wrap img{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
border-radius:6px;
box-shadow:0px 0px 15px #00FA9A;
box-reflect:below 6px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));/*倒影*/
-webkit-box-reflect:below 6px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));/*倒影*/
-moz-box-reflect:below 6px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); /*很遗憾，火狐不支持*/
cursor:pointer; /*手型*/
}
</style>
</head>
<body>
<div id="perspective"> <!-- 相当于舞台 -->
<div id="wrap"> <!-- 相当于外包装 -->
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="10.jpg"/>
<img src="11.jpg"/>
</div>
</div>
<script type="text/javascript">
/*
总结：
首先将每个图片赋值一个不同的角度和一个偏移位置
然后在拖放时实时更新这个角度和偏移量
在拖放结束时逐渐减小这个角度和偏移量
也可以做成只在平面转动的，只要不改变rotateX就行
*/
window.onload =function(){
var wrapDom = document.querySelector("#wrap"); //获取wrap
var imgDom = document.getElementsByTagName("img");//获取wrapimg
var wrap = document.getElementById('wrap');
var len = imgDom.length;//获取img的长度
var imgDeg = 360/len; //平分360度
for(var i=0;i<len;i++){ //分别赋值每个img一个rotateY(沿Y轴转动)和translateZ(偏移位置)
imgDom[i].style.transform= "rotateY("+i*imgDeg+"deg) translateZ(350px)";
imgDom[i].style.transition ="transform 1s "+(len-1-i)*0.2+"s";
}
var lastx,lasty,nowx,nowy,changeX,changeY,roX=-10;roY=0; //初始化新旧鼠标坐标 每次改变坐标大小 和rotateX和rotateY初始值
center(); //执行函数
window.onresize =center;//当缩放窗口时调用函数
function center(){ // 垂直居中啊
var mt = window.innerHeight/2-wrapDom.offsetHeight; //获取窗口高度除以二再减去容器高度=容器顶距窗口顶的距离
wrapDom.style.cssText = "margin-top:"+mt+"px";
}
setTimeout(function(){
wrap.style.backgroundImage = "url(.1.jpg)";
},2000)
document.onmousedown = function(e){
clearInterval(timer)
var timer = null;
var ev = e||window.event;//兼容事件
lastx = ev.clientX; //当前鼠标位置
lasty = ev.clientY;
this.onmousemove = function(e){
clearInterval(timer)
var ev = e||window.event;
var nowx = ev.clientX; //现在鼠标位置
var nowy = ev.clientY;
changeX=nowx-lastx; //x轴变化了多少
changeY=nowy-lasty;//y轴变化了多少
roY+=changeX*0.1;//调节转的速度
roX-=changeY*0.1;//调节转的速度
wrapDom.style.transform="rotateX("+roX+"deg) rotateY("+roY+"deg)"; //赋值新的rotateX和rotateY
lastx=nowx; //将旧的数据更新
lasty=nowy; //将旧的数据更新
}
this.onmouseup = function(){
this.onmousemove = null;//取消移动事件
timer=setInterval(function(){//设定时器逐渐减小rotateX和rotateY
changeX*=0.95; //每30毫秒rotateX减少5%
changeY*=0.95;//每30毫秒rotateY减少5%
roY+=changeX*0.2; //调节转的速度
roX-=changeY*0.2; //调节转的速度
wrapDom.style.transform="rotateX("+roX+"deg) rotateY("+roY+"deg)";//赋值新的rotateX和rotateY
},30)
}
return false; //取消默认事件
}
}
</script>
</body>
</html>
0 0
- 3D拖拽相册
- 3d拖拽相册
- 3D效果相册
- html5 3d相册
- <<web>>3d 相册
- 3D相册旋转
- 3D旋转相册
- 3D旋转相册
- CSS3 3D相册
- 3D相册 效果图如下
- 3D相册 效果图如下 .
- android 3d相册实例
- 3D相册旋转效果
- 3D立体相册，一个可旋转的立体相册
- jquery做的3D相册
- Android作业:一个3D相册源码
- 3D效果Android相册 倒影效果
- Android作业:一个3D相册源码
- CocoaPod 版本升级
- Android轻松实现ListView下拉放大
- Android 简单实现流式布局
- AndroidStudio 用正式签名调试应用
- Android不规则形状点击检测
- 3d拖拽相册
- cisco linux english word
- 导出/导入DataPump参数TRACE - 如何诊断Oracle数据泵(文档 ID 286496.1)
- 在CentOS下搭建自己的Git服务器
- MySQL 大小写敏感修改不了
- Qt5.5 QFileDialog类的使用方法
- C语言内存
- wmi执行dos命令
- SVN commit或import 的 Permission denied的原因
