 |
|
| |
| 3D 입체 갤러리 (바람개비 느낌) 상,하,좌,우 드래그 가능 |
|
|
  |
12년 전
|
<html>
<head>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
#screen {
position:absolute;
left: 10%;
top: 10%;
width: 600;
height: 600;
overflow: hidden;
}
#screen img {
position: absolute;
cursor: pointer;
width: 0px;
filter: fliph flipv;
}
</style>
<script type="text/javascript">
var car = {
scr : 0,
img : 0,
xm : 0,
ym : 0,
xmb : 0,
ymb : 0,
drag : false,
cosY : 0,
cosX : 0,
sinY : 0,
sinX : 0,
xd : 0,
yd : -10,
run : function () {
/* ==== rotation speed ==== */
var Ay = car.xd / (car.scr.offsetWidth * .2);
var Ax = car.yd / (car.scr.offsetHeight * .2);
/* ==== vertical / horizontal friction ==== */
if(!car.drag){
if(Math.abs(car.xd) > Math.abs(car.yd)){
car.xd *= .99;
car.yd *= .95;
} else {
car.xd *= .95;
car.yd *= .99;
}
}
/* ==== rotation angles ==== */
car.cosY = Math.cos(Ay);
car.cosX = Math.cos(Ax);
car.sinY = Math.sin(Ay);
car.sinX = Math.sin(Ax);
/* ==== animate images ==== */
for(var i = 0; i < 8; i++) car.img[i].rotate();
/* ==== loop ==== */
setTimeout(car.run, 16);
},
mouse : function (e) {
this.xm = e.clientX;
this.ym = -e.clientY;
if(this.drag){
this.xd = this.xm - this.xmb;
this.yd = this.ym - this.ymb;
}
this.xmb = this.xm;
this.ymb = this.ym;
},
resize : function () {
car.nw = car.scr.offsetWidth;
car.nh = car.scr.offsetHeight;
},
init : function () {
this.scr = document.getElementById('screen');
this.img = this.scr.getElementsByTagName('img');
this.resize();
var k = 0;
for(var xi = -1; xi <= 1; xi+=2) {
for(var yi = -1; yi <= 1; yi+=2) {
for(var zi = -1; zi <= 1; zi+=2) {
var o = this.img[k++];
o.css = o.style;
o.x3d = xi;
o.y3d = yi;
o.z3d = zi;
o.onselectstart = function () { return false; }
o.ondrag = function () { return false; }
o.onmousedown = function () {
car.drag = true;
car.xd = 0;
car.yd = 0;
this.css.cursor = "move";
return false;
}
o.onmouseout = function () {car.drag = false; this.css.cursor = "pointer"; return false; }
o.onmouseup = function () {car.drag = false; this.css.cursor = "pointer"; return false; }
o.rotate = function () {
/* ==== trigo ==== */
var tz = this.z3d * car.cosY - this.x3d * car.sinY;
this.x3d = this.z3d * car.sinY + this.x3d * car.cosY;
this.z3d = this.y3d * car.sinX + tz * car.cosX;
this.y3d = this.y3d * car.cosX - tz * car.sinX;
var zf = 1 / (this.z3d / 10 + 1);
var x2d = this.x3d * zf * car.nw * .2;
var y2d = this.y3d * zf * car.nh * .2;
var w2d = Math.abs(x2d * 1.6);
var h2d = Math.abs(y2d * 1.6);
/* ==== HTML animation ==== */
this.css.left = ''.concat(Math.round(car.nw * .5 - x2d - w2d * .5), 'px');
this.css.top = ''.concat(Math.round(car.nh * .5 - y2d - h2d * .5), 'px');
this.css.width = ''.concat(Math.round(w2d), 'px');
this.css.height = ''.concat(Math.round(h2d), 'px');
this.css.zIndex = Math.round(zf * 100);
if (this.filters) {
/* ==== additional IE flip effect ==== */
this.filters[0].enabled = (x2d < 0) ? "true" : "false";
this.filters[1].enabled = (y2d < 0) ? "true" : "false";
}
}
}
}
}
this.run();
}
}
onload = function() {
/* ==== window mousemove event ==== */
document.onmousemove = function (e) {
if (window.event) e = window.event;
car.mouse(e);
}
/* ==== window onresize event ==== */
onresize = car.resize;
/* ==== launch script ==== */
car.init();
}
</script>
</head>
<body>
이미지를 상,하,좌,우로 드래그 하시면 각각의 방향으로 회전시킬 수 있습니다.
<div id="screen">
<div style="position:absolute;width:100%;height:10%;"></div>
<div style="position:absolute;width:100%;height:10%;bottom:0px"></div>
<img src="이미지주소" alt="11">
<img src="이미지주소" alt="11">
<img src="이미지주소" alt="11">
<img src="이미지주소" alt="11">
<img src="이미지주소" alt="11">
<img src="이미지주소" alt="11">
<img src="이미지주소" alt="11">
<img src="이미지주소" alt="11">
</div>
</body>
</html>
|
|
 추천 : 660 |
추천
목록
|
|
| |
|
