ポラロイド風写真配置
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ポラロイド風ギャラリー</title>
<link href="css/style.css" rel="stylesheet">
<script src="http://www.google.com/jsapi"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="polaroid">
<img src="images/01.jpg" alt="">
<p>Caribbean Islands 01</p>
</div>
<div class="polaroid">
<img src="images/02.jpg" alt="">
<p>Caribbean Islands02</p>
</div>
<div class="polaroid">
<img src="images/03.jpg" alt="">
<p>Caribbean Islands 03</p>
</div>
<div class="polaroid">
<img src="images/04.jpg" alt="">
<p>Caribbean Islands 04</p>
</div>
<div class="polaroid">
<img src="images/05.jpg" alt="">
<p>Caribbean Islands 05</p>
</div>
<div class="polaroid">
<img src="images/06.jpg" alt="">
<p>Caribbean Islands 06</p>
</div>
<div class="polaroid">
<img src="images/07.jpg" alt="">
<p>Caribbean Islands 07</p>
</div>
<div class="polaroid">
<img src="images/08.jpg" alt="">
<p>Caribbean Islands 08</p>
</div>
<div class="polaroid">
<img src="images/09.jpg" alt="">
<p>Caribbean Islands 09</p>
</div>
<div class="polaroid">
<img src="images/10.jpg" alt="">
<p>Caribbean Islands 10</p>
</div>
</body>
</html>
"utf-8";
body, div, img, p {
padding:0;
margin:0;
}
body {
overflow:hidden;
background-color:#67B8F7;
}
.polaroid {
width:368px;
height:376px;
background-image:url(../images/polaroid-bg.png);
position:absolute;
}
.polaroid img {
width:335px;
height:275px;
margin:25px 0 0 15px;
}
.polaroid p {
color:#2E2E2E;
font-size:20px;
font-family:
Georgia,serif;
text-align:center;
margin-top:15px;
}
google.load("jquery", "1.3.1");
google.load("jqueryui", "1.7.0");
google.setOnLoadCallback(function()
{
$(".polaroid").each(function (i) {
var tempVal = Math.round(Math.random());
if(tempVal == 1) {
var rotDegrees = randomXToY(330, 360);
} else {
var rotDegrees = randomXToY(0, 30);
}
if(window.innerWidth == undefined) {
var wiw = 1000;
var wih = 700;
} else {
var wiw = window.innerWidth;
var wih = window.innerHeight;
}
var cssObj = {
'left' : Math.random()*(wiw-400),
'top' : Math.random()*(wih-400),
'-webkit-transform' : 'rotate('+ rotDegrees +'deg)',
'-moz-transform' : 'rotate('+ rotDegrees +'deg)',
'-ms-transform' : 'rotate('+ rotDegrees +'deg)',
'-o-transform' : 'rotate('+ rotDegrees +'deg)',
'tranform' : 'rotate('+ rotDegrees +'deg)' };
$(this).css(cssObj);
});
var zindexnr = 1;
var dragging = false;
$(".polaroid").mouseup(function(e){
if(!dragging) {
zindexnr++;
var cssObj = {
'z-index' : zindexnr,
'transform' : 'rotate(0deg)',
'-webkit-transform' : 'rotate(0deg)',
'-moz-transform' : 'rotate(0deg)',
'-ms-transform' : 'rotate(0deg)',
'-o-transform' : 'rotate(0deg)'
};
$(this).css(cssObj);
}
});
$(".polaroid").draggable({
cursor: 'crosshair',
start: function(event, ui) {
dragging = true;
zindexnr++;
var cssObj = {
'box-shadow' : '#888 5px 10px 10px',
'-webkit-box-shadow' : '#888 5px 10px 10px',
'-moz-box-shadow' : '#888 5px 10px 10px',
'-ms-box-shadow' : '#888 5px 10px 10px',
'-o-box-shadow' : '#888 5px 10px 10px',
'margin-left' : '-10px',
'margin-top' : '-10px',
'z-index' : zindexnr };
$(this).css(cssObj);
},
stop: function(event, ui) {
var tempVal = Math.round(Math.random());
if(tempVal == 1) {
var rotDegrees = randomXToY(330, 360);
} else {
var rotDegrees = randomXToY(0, 30);
}
var cssObj = {
'box-shadow' : '',
'-webkit-box-shadow' : '',
'-moz-shadow' : '',
'-ms-shadow' : '',
'-o-shadow' : '',
'transform' : 'rotate('+ rotDegrees +'deg)',
'-webkit-transform' : 'rotate('+ rotDegrees +'deg)',
'-moz-transform' : 'rotate('+ rotDegrees +'deg)',
'-ms-transform' : 'rotate('+ rotDegrees +'deg)',
'-o-transform' : 'rotate('+ rotDegrees +'deg)',
'margin-left' : '0px',
'margin-top' : '0px' };
$(this).css(cssObj);
dragging = false;
}
});
function randomXToY(minVal,maxVal,floatVal) {
var randVal = minVal+(Math.random()*(maxVal-minVal));
return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}
});