1. [代码]index.html
<div class="albums">
<div class="album" id="drop_1" droppable="true"><h2>Album 1</h2></div>
<div class="album" id="drop_2" droppable="true"><h2>Album 1</h2></div>
<div class="album" id="drop_3" droppable="true"><h2>Album 3</h2></div>
</div>
<div ></div>
<div class="gallery">
<a id="1" draggable="true"><img src="images/1.jpg"></a>
<a id="2" draggable="true"><img src="images/2.jpg"></a>
<a id="3" draggable="true"><img src="images/3.jpg"></a>
<a id="4" draggable="true"><img src="images/4.jpg"></a>
<a id="5" draggable="true"><img src="images/5.jpg"></a>
<a id="6" draggable="true"><img src="images/6.jpg"></a>
<a id="7" draggable="true"><img src="images/7.jpg"></a>
<a id="8" draggable="true"><img src="images/8.jpg"></a>
<a id="9" draggable="true"><img src="images/9.jpg"></a>
<a id="10" draggable="true"><img src="images/10.jpg"></a>
<a id="11" draggable="true"><img src="images/11.jpg"></a>
<a id="12" draggable="true"><img src="images/12.jpg"></a>
</div>
<script src="js/main.js"></script>
2. [代码]css/main.css
/* Photo Gallery styles */
.gallery {
margin: 50px auto 0;
width: 840px;
}
.gallery a {
display: inline-block;
height: 135px;
margin: 10px;
opacity: 1;
position: relative;
width: 180px;
-khtml-user-drag: element;
/* CSS3 Prevent selections */
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
/* CSS3 transition rules */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.gallery a img {
border: 8px solid #fff;
border-bottom: 20px solid #fff;
cursor: pointer;
display: block;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
/* CSS3 Box sizing property */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
/* CSS3 transition rules */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
/* CSS3 Box Shadow */
-moz-box-shadow: 2px 2px 4px #444;
-webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
}
/* Custom CSS3 rotate transformation */
.gallery a:nth-child(1) img {
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.gallery a:nth-child(2) img {
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.gallery a:nth-child(3) img {
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.gallery a:nth-child(4) img {
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.gallery a:nth-child(5) img {
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.gallery a:nth-child(6) img {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.gallery a:nth-child(7) img {
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
.gallery a:nth-child(8) img {
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.gallery a:nth-child(9) img {
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
.gallery a:nth-child(10) img {
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
.gallery a:nth-child(11) img {
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
.gallery a:nth-child(12) img {
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.gallery a:hover img {
z-index: 5;
/* CSS3 transition rules */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
/* CSS3 transform rules */
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.gallery a.hidden {
height: 0;
margin: 0;
opacity: 0;
width: 0;
}
.albums {
margin: 40px auto 0;
overflow: hidden;
width: 840px;
}
.album {
border: 3px dashed #ccc;
float: left;
margin: 10px;
min-height: 100px;
padding: 10px;
width: 220px;
/* CSS3 transition rules */
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
transition: all 1.0s ease;
}
.album a {
display: inline-block;
height: 56px;
margin: 15px;
opacity: 1;
position: relative;
width: 75px;
-khtml-user-drag: element;
-webkit-user-drag: element;
-khtml-user-select: none;
-webkit-user-select: none;
/* CSS3 Prevent selections */
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
/* CSS3 transition rules */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}http://www.huiyi8.com/hunsha/chuangyi/
.album a img {创意婚纱照片
border: 4px solid #fff;
border-bottom: 10px solid #fff;
cursor: pointer;
display: block;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
/* CSS3 Box sizing property */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
/* CSS3 transition rules */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
/* CSS3 Box Shadow */
-moz-box-shadow: 2px 2px 4px #444;
-webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
}
4. [代码]js/main.js
// add event handler
var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
HTML5 拖放：在相册中对照片进行排序
最新推荐文章于 2021-06-08 19:57:13 发布
