-
Notifications
You must be signed in to change notification settings - Fork 0
/
3D相册.html
111 lines (103 loc) · 3.14 KB
/
3D相册.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!doctype html>
<html onselectstart="return false"> <!--不可选中-->
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>3D相册 --krry</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background:#000;overflow:hidden;}
#wrap{width:100px;height:180px;margin:200px auto;
position:relative;transform-style:preserve-3d;
transform:perspective(800px) rotateX(-10deg);}
#wrap img{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:5px;
box-shadow:0 0 10px #fff;}
</style>
</head>
<body>
<!-- 自动播放的音乐 -->
<audio controls autoplay="autoplay">
<source src="./music/张宇 - 给你们.mp3" type="audio/mpeg" loop="ture">
您当前的浏览器不支持播放音乐
</audio>
<!-- 要存放的图片 -->
<div id="wrap">
<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>
<img src="img/5.jpg"/>
<img src="img/6.jpg"/>
<img src="img/7.jpg"/>
<img src="img/8.jpg"/>
<img src="img/9.jpg"/>
<img src="img/10.jpg"/>
<img src="img/11.jpg"/>
<img src="img/12.jpg"/>
<img src="img/13.jpg"/>
<img src="img/14.jpg"/>
<img src="img/15.jpg"/>
<img src="img/16.jpg"/>
<img src="img/17.jpg"/>
<img src="img/18.jpg"/>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
var roX = -10;
var roY = 0;
var Deg = 360/$("#wrap img").size(); //得到img的个数
$("#wrap img").each(function(i){ //遍历每一张图片(i)是索引，下标
$(this).css({
"transform":"rotateY("+Deg*i+"deg) translateZ(350px)",//以逗号分隔(translateZ)撑开
}).attr("ondragstart","return false");
});
active();
function active(){
$("#wrap img").mouseenter(function(){
$(this).animate({ //添加动画
width:"180px",
height:"270px",
top:'-45px',
left:'-28px',
Zindex:5
},500);
});
}
$("#wrap img").mouseleave(function(){
$(this).animate({
width:"120px",
height:"180px",
top:'0px',
left:'0px',
Zindex:2
},500);
});
var kk = 0;
$(document).mousedown(function(ev){ //鼠标按下的时候
$("#wrap img").unbind("mouseenter"); //按下的时候，取消绑定
var x_ = ev.clientX; //获取鼠标点击时的坐标
var y_ = ev.clientY;
$(this).bind("mousemove",function(ev){//鼠标移动中（bind绑定这个事件）向匹配元素附加一个或更多事件处理器
var x = ev.clientX; //获取鼠标点击时的坐标
var y = ev.clientY;
var xN = x - x_;
var yN = y - y_;
roX += xN*0.2;
roY -= yN*0.2;
$("#wrap").css({
"transform":"perspective(800px) rotateX("+roY+"deg) rotateY("+roX+"deg)",
});
x_ = ev.clientX; //获取鼠标点击时的坐标
y_ = ev.clientY;
});
});
$(document).mouseup(function(ev){ //鼠标抬起来
$(this).unbind("mousemove"); //取消绑定
active(); //鼠标弹起的时候调用图片变大的方法
});
});
</script>
</body>
</html>