改的别人的程序，不能说原创吧，算半个原创
<!DOCTYPE html>
<!-- saved from url=(0066)http://enjoyhtml5.com/hackathons/20110626/photo-gallery/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>html5演示相册</title>
<script language="javascript" type="text/javascript" src="./gallary/jquery-1.4.2.min.js"></script>
<style type="text/css" media="screen">
body {
bbackground-color: black;
color: white;
font-family: Verdana, Arial;
font-size: 12px;
background: -webkit-gradient(radial, 50% 410, 1, 50% 410, 200, from(white), to(black));
}
#container {
width: 100%;
height: 700px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
#shape {
position: relative;
top: 160px;
margin: 0 auto;
height: 140px;
width: 140px;
-webkit-transform-style: preserve-3d;
}
.plane {
position: absolute;
height: 140px;
width: 140px;
border: 1px solid white;
-webkit-border-radius: 12px;
-webkit-box-sizing: border-box;
text-align: center;
font-family: Times, serif;
font-size: 100pt;
color: black;
background-color: rgba(255, 255, 255, 0.6);
-webkit-transition: -webkit-transform 2s, opacity 2s;
-webkit-backface-visibility: hidden;
}
#shape.backfaces .plane {
-webkit-backface-visibility: visible;
}
#shape.spin{
-webkit-animation: spin 10s infinite linear;
}
@-webkit-keyframes spin {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-360deg); }
}
/* ---------- ring styles ------------- */
.controls {
width: 80%;
margin: 0 auto;
padding: 5px 20px;
-webkit-border-radius: 12px;
background-color: rgba(255, 255, 255, 0.5);
line-height:23px;
}
.controls input[type="checkbox"] {
margin-left: 0;
}
.controls input[type="range"] {
height: 6px;
margin-left: 15px;
}
html {height:100%;}
body {margin:0;padding:0;border:3px solid orange;height:100opx;}
</style>
</head>
<body>
<div id="container" style="-webkit-perspective-origin-y: -10px; ">
<div id="shape" class="spin ring backfaces">
<div id="second" class="plane" style="-webkit-transform: translateZ(270px);">1</div>
</div>
</div>
<button id="getCount">图片数量</button>
<script>
if (FileReader) {
var container = document.body,
getCountButton = document.getElementById("getCount"),
imgArray = [];
getCountButton.addEventListener("click", function() {
alert(imgArray.length);
}, true);
var isImage = function(type) {
switch (type) {
case "image/jpeg":
case "image/png":
case "image/gif":
case "image/bmp":
case "image/jpg":
return true;
default:
return false;
}
};
container.addEventListener("dragenter", function(event) {
this.setAttribute("style", "border-style:dashed;");
}, false);
container.addEventListener("dragover", function(event) {
event.stopPropagation();
event.preventDefault();
}, false);
container.addEventListener("drop", function(event) {
event.stopPropagation();
event.preventDefault();
var files = event.dataTransfer.files;
for (var i = 0, j = files.length; i < j; i++) {
var file = files[i];
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(event){
AddDiv(this.result);
imgArray.push(this.result);
}
};
}, false);
container.addEventListener("dragleave", function(event) {
this.setAttribute("style", "");
}, false);
}
function AddDiv(imgsrc)
{
if($("#second")!=null)
{
$("#second").remove();
}
var length= parseInt($("#shape div").size())+1;
/*if(length==1)
{
var divcsh="<div id='one"+length+"' class='plane' ";
divcsh+="style='-webkit-transform: rotateY(0deg) translateZ(270px);'>";
divcsh+=length;
divcsh+="</div>"
$("#shape").append(divcsh);
}
*/
var m=0;
if(length>10)
{
m=25*length;
}
else
{
m=250;
}
for(var i=1;i<length;i++)
{
var Xjd=parseInt(360*i/length);
$("#one"+i).css("-webkit-transform","rotateY("+Xjd+"deg) translateZ("+m+"px)");
}
var div="<div id='one"+length+"' class='plane' ";
div+="style='-webkit-transform: rotateY(0deg) translateZ("+m+"px);'>";
div+="<img src='";
div+=imgsrc;
div+="' />";
div+="</div>";
$("#shape").append(div);
}
</script>
</body></html>