以下是 jquery照片拖动删除排序特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jquery照片拖动删除排序</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="" />
<meta name="keywords" content=""/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:11px;
}
span.reference a{
color:#555;
text-decoration:none;
text-shadow:1px 1px 1px #fff;
}
span.reference a:hover{
color:#000;
}
h1.title{
text-indent:-9000px;
position:absolute;
top:0px;
left:0px;
width:563px;
height:88px;
background:transparent url(images/title.png) no-repeat top left;
}
</style>
</head>
<body>
<div>
<a id="pd_loading" href="#" class="pd_loading"></a>
</div>
<div id="pd_options_bar" class="pd_options_bar">
<a href="#" class="shuffle">Shuffle</a>
<a href="#" class="backdesk" style="display:none;">Back to Desk</a>
<a href="#" class="viewall">View All</a>
</div>
<div id="pd_container" class="pd_container">
<div class="pd_photo">
<div class="pd_hold">
<img src="photos/1.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>
<div class="pd_photo">
<div class="pd_hold">
<img src="photos/2.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>
<div class="pd_photo">
<div class="pd_hold">
<img src="photos/3.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>
<div class="pd_photo">
<div class="pd_hold">
<img src="photos/4.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>
<div class="pd_photo">
<div class="pd_hold">
<img src="photos/5.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>
</div>
<!-- The JavaScript -->
<script src="jquery-1.4.2.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.transform-0.6.2.min.js"></script>
<script src="jquery.animate-shadow-min.js"></script>
<script type="text/javascript">
$(function() {
/**
* idx:
* index of photo that is currently hold
* idxLarge:
* index of photo that is currently on full mode
* mouseup:
* flag to use on the mouseup and mousedown events,
* to help preventing the browser default selection of elements
*/
var idx,idxLarge = -1;
var mouseup = false;
/**
* for now we hardcode the values of our thumb containers
*/
var photoW = 184;
var photoH = 205;
/**
* the photos and options container
*/
var $container = $('#pd_container');
var $options = $('#pd_options_bar');
var photosSize = $container.find('.pd_photo').length;
/**
* navigation current step
*/
var navPage = 0;
/**
* spreads the photos on the table..
*/
var ie = false;
if ($.browser.msie) {
ie = true;
}
start();
function start(){
$('#pd_loading').show();
var tableW = $container.width();
var tableH = $container.height();
var horizontalMax = tableW - photoW;
var verticalMax = tableH - photoH;
$('<img />').attr('src','images/paperball.png');
/**
* display all the photos on the desk, with a random rotation,
* and also make them draggable.
* on mouse down, we want the photo to enlarge in a few pixels,
* and to rotate 0 degrees
*/
var cntPhotos = 0;
$container.find('.pd_photo').each(function(i){
var $photo = $(this);
$('<img />').load(function(){
++cntPhotos;
var $image = $(this);
var r = Math.floor(Math.random()*201)-100;//*41
var maxzidx = parseInt(findHighestZIndex()) + 1;
var param = {
'top' : Math.floor(Math.random()*verticalMax) +'px',
'left' : Math.floor(Math.random()*horizontalMax) +'px',
'z-index' : maxzidx
};
$photo.css(param);
if(!ie)
$photo.transform({'rotate' : r + 'deg'});
$photo.show();
if(cntPhotos == photosSize){
bindEvents();
$('#pd_loading').hide();
}
}).attr('src',$photo.find('img').attr('src'));
});
}
/**
* grab a photo
*/
function mouseDown($photo){
mouseup = true;
idx = $photo.index() + 1;
var maxzidx = parseInt(findHighestZIndex()) + 1;
$photo.css('z-index',maxzidx);
if(ie)
var param = {
'width' : '+=40px',
'height' : '+=40px'
};
else
var param = {
'width' : '+=40px',
'height' : '+=40px',
'rotate' : '0deg',
'shadow' : '5px 5px 15px #222'
};
$photo.stop(true,true).animate(param,100).find('img').stop(true,true).animate({
'width' : '+=40px',
'height' : '+=40px'
},100);
}
/**
* we do the mouseup on the document to prevent the
* case when we release the mouse outside of a photo.
* also, we want the photo to get smaller again,
* rotate some random degrees, and also move it some pixels
*/
$(document).bind('mouseup',function(e){
if(mouseup){
mouseup = false;
var $photo = $container.find('.pd_photo:nth-child('+idx+')');
var r = Math.floor(Math.random()*101)-50;
var $photoT = parseFloat($photo.css('top'),10);
var $photoL = parseFloat($photo.css('left'),10);
var newTop = $photoT + r;
var newLeft = $photoL + r;
if(ie)
var param = {
'width' : '-=40px',
'height' : '-=40px',
'top' : newTop + 'px',
'left' : newLeft + 'px'
};
else
var param = {
'width' : '-=40px',
'height' : '-=40px',
'top' : newTop + 'px',
'left' : newLeft + 'px',
'rotate' : r+'deg',
'shadow' : '0 0 5px #000'
};
$photo.stop(true,true).animate(param,200).find('img').stop(true,true).animate({
'width' : '-=40px',
'height': '-=40px'
},200);
}
e.preventDefault();
});
/**
* removes the photo element from the DOM,
* after showing the paper image..
*/
$container.find('.delete').bind('click',function(){
var $photo = $(this).parent();
var $photoT = parseFloat($photo.css('top'),10);
var $photoL = parseFloat($photo.css('left'),10);
var $photoZIndex = $photo.css('z-index');
var $trash = $('<div />',{
'className' : 'pd_paperball',
'style' : 'top:' + parseInt($photoT + photoH/2) + 'px;left:' + parseInt($photoL + photoW/2) +'px;width:0px;height:0px;z-index:' + $photoZIndex
}).appendTo($container);
$trash.animate({
'width' : photoW + 'px',
'height': photoH + 'px',
'top' : $photoT + 'px',
'left' : $photoL + 'px'
},100,function(){
var $this = $(this);
setTimeout(function(){
$this.remove();
},800);
});
$photo.animate({
'width' : '0px',
'height': '0px',
'top' : $photoT + photoH/2 + 'px',
'left' : $photoL + photoW/2 +'px'
},200,function(){
--photosSize;
$(this).remove();
});
});
function stack(){
navPage = 0;
var cnt_photos = 0;
var windowsW = $(window).width();
var windowsH = $(window).height();
$container.find('.pd_photo').each(function(i){
var $photo = $(this);
$photo.css('z-index',parseInt(findHighestZIndex()) + 1000 + i)
.stop(true)
.animate({
'top' : parseInt((windowsH-100)/2 - photoH/2) + 'px',
'left' : parseInt((windowsW-100)/2 - photoW/2) + 'px'
},800,function(){
$options.find('.backdesk').show();
var $photo = $(this);
++cnt_photos;
var $nav = $('<a class="pd_next_photo" style="display:none;"></a>');
$nav.bind('click',function(){
navigate();
$(this).remove();
});
$photo.prepend($nav);
$photo.draggable('destroy')
.find('.delete')
.hide()
.andSelf()
.find('.pd_hold')
.unbind('mousedown')
.bind('mousedown',function(){return false;});
$photo.unbind('mouseenter')
.bind('mouseenter',function(){
$nav.show();
})
.unbind('mouseleave')
.bind('mouseleave',function(){
$nav.hide();
});
$options.find('.shuffle,.viewall').unbind('click');
if(cnt_photos == photosSize)
enlarge(findElementHighestZIndex());
});
});
}
function enlarge($photo){
var windowsW = $(window).width();
var windowsH = $(window).height();
if(ie)
var param = {
'width' : '+=200px',
'height': '+=200px',
'top' : parseInt((windowsH-100)/2 - (photoH+200)/2) + 'px',
'left' : parseInt((windowsW-100)/2 - (photoW+200)/2) + 'px'
};
else
var param = {
'width' : '+=200px',
'height': '+=200px',
'top' : parseInt((windowsH-100)/2 - (photoH+200)/2) + 'px',
'left' : parseInt((windowsW-100)/2 - (photoW+200)/2) + 'px',
'rotate': '0deg',
'shadow': '5px 5px 15px #222'
};
$photo.animate(param,500,function(){
idxLarge = $(this).index();
}).find('img').animate({
'width' : '+=200px',
'height': '+=200px'
},500);
}
/**
* back to desk
*/
function disperse(){
var windowsW = $(window).width();
var windowsH = $(window).height();
$container.find('.pd_photo').each(function(i){
var $photo = $(this);
//if it is the current large photo:
if($photo.index() == idxLarge){
if(ie)
var param = {
'top' : parseInt((windowsH-100)/2 - photoH/2) + 'px',
'left' : parseInt((windowsW-100)/2 - photoW/2) + 'px',
'width' : '170px',
'height' : '170px'
};
else
var param = {
'top' : parseInt((windowsH-100)/2 - photoH/2) + 'px',
'left' : parseInt((windowsW-100)/2 - photoW/2) + 'px',
'width' : '170px',
'height' : '170px',
'shadow' : '1px 1px 5px #555'
};
$photo.stop(true).animate(param,500, function(){
shuffle();
$options.find('.viewall').show();
}).find('img').animate({
'width' : '170px',
'height' : '170px'
},500);
}
});
$container.find('.pd_next_photo').remove();
bindEvents();
}
function bindEvents(){
$options.find('.shuffle').unbind('click').bind('click',function(e){
if(photosSize == 0) return;
shuffle();
e.preventDefault();
}).andSelf().find('.viewall').unbind('click').bind('click',function(e){
var $this = $(this);
if(photosSize == 0) return;
stack();
$this.hide();
e.preventDefault();
}).andSelf().find('.backdesk').unbind('click').bind('click',function(e){
var $this = $(this);
if(photosSize == 0) return;
disperse();
$this.hide();
e.preventDefault();
});
$container.find('.pd_photo').each(function(i){
var $photo = $(this);
$photo.draggable({
containment : '#pd_container'
}).find('.delete')
.show()
}).find('.pd_hold').unbind('mousedown').bind('mousedown',function(e){
var $photo = $(this).parent();
mouseDown($photo);
e.preventDefault();
});
}
function navigate(){
if(photosSize == 0) return;
var tableW = $container.width();
var tableH = $container.height();
var horizontalMax = tableW - photoW;
var verticalMax = tableH - photoH;
var $photo = $container.find('.pd_photo:nth-child('+parseInt(idxLarge+1)+')');
var r = Math.floor(Math.random()*201)-100;//*41
if(ie)
var param = {
'top' : Math.floor(Math.random()*verticalMax) +'px',
'left' : Math.floor(Math.random()*horizontalMax) +'px',
'width' : '170px',
'height' : '170px'
};
else
var param = {
'top' : Math.floor(Math.random()*verticalMax) +'px',
'left' : Math.floor(Math.random()*horizontalMax) +'px',
'width' : '170px',
'height' : '170px',
'rotate' : r+'deg',
'shadow' : '1px 1px 5px #555'
};
$photo.stop(true).animate(param,500,function(){
++navPage;
var $photo = $(this);
$container.append($photo.css('z-index',1));
if(navPage < photosSize)
enlarge(findElementHighestZIndex());
else{ //last one
$options.find('.backdesk').hide();
$options.find('.viewall').show();
bindEvents();
}
}).find('img').animate({
'width' : '170px',
'height' : '170px'
},500);
}
function shuffle(){
var tableW = $container.width();
var tableH = $container.height();
var horizontalMax = tableW - photoW;
var verticalMax = tableH - photoH;
$container.find('.pd_photo').each(function(i){
var $photo = $(this);
var r = Math.floor(Math.random()*301)-100;//*41
if(ie)
var param = {
'top' : Math.floor(Math.random()*verticalMax) +'px',
'left' : Math.floor(Math.random()*horizontalMax) +'px'
};
else
var param = {
'top' : Math.floor(Math.random()*verticalMax) +'px',
'left' : Math.floor(Math.random()*horizontalMax) +'px',
'rotate' : r+'deg'
};
$photo.animate(param,800);
});
}
function findHighestZIndex(){
var photos = $container.find('.pd_photo');
var highest = 0;
photos.each(function(){
var $photo = $(this);
var zindex = $photo.css('z-index');
if (parseInt(zindex) > highest) {
highest = zindex;
}
});
return highest;
}
function findElementHighestZIndex(){
var photos = $container.find('.pd_photo');
var highest = 0;
var $elem;
photos.each(function(){
var $photo = $(this);
var zindex = $photo.css('z-index');
if (parseInt(zindex) > highest) {
highest = zindex;
$elem = $photo;
}
});
return $elem;
}
// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
var rest = this.slice((to || from) + 1 || this.length);
this.length = from < 0 ? this.length + from : from;
return this.push.apply(this, rest);
};
});
</script>
</body>
</html>
JS代码(jquery.animate-shadow-min.js):
/*! * Shadow animation jQuery-plugin * http://www.bitstorm.org/jquery/shadow-animation/ * Copyright 2010 Edwin Martin <edwin@bitstorm.org> * Released under the MIT and GPL licenses. */
(function(e){
function i(a,b,c){
var d=[];
a.c&&d.push("inset");
typeof b.color!="undefined"&&d.push("#"+g(a.color[0]+c*(b.color[0]-a.color[0]))+g(a.color[1]+c*(b.color[1]-a.color[1]))+g(a.color[2]+c*(b.color[2]-a.color[2])));
typeof b.left!="undefined"&&d.push(parseInt(a.left+c*(b.left-a.left))+"px "+parseInt(a.top+c*(b.top-a.top))+"px");
typeof b.blur!="undefined"&&d.push(parseInt(a.blur+c*(b.blur-a.blur))+"px");
typeof b.a!="undefined"&&d.push(parseInt(a.a+c*(b.a-a.a))+"px");
return d.join(" ")}
function g(a){
a=parseInt(a).toString(16);
return a.length==1?"0"+a:a}
function h(a){
var b,c,d={
}
;
if(b=/#([0-9a-fA-F]{
2}
)([0-9a-fA-F]{
2}
)([0-9a-fA-F]{
2}
)/.exec(a))c=[parseInt(b[1],16),parseInt(b[2],16),parseInt(b[3],16)];
else if(b=/#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/.exec(a))c=[parseInt(b[1],16)*17,parseInt(b[2],16)*17,parseInt(b[3],16)*17];
else if(b=/rgb\(\s*([0-9]{
1,3}
)\s*,\s*([0-9]{
1,3}
)\s*,\s*([0-9]{
1,3}
)\s*\)/.exec(a))c=[parseInt(b[1]),parseInt(b[2]),parseInt(b[3])];
if(b=/([0-9]+)(?:px)?\s+([0-9]+)(?:px)?(?:\s+([0-9]+)(?:px)?)?(?:\s+([0-9]+)(?:px)?)?/.exec(a))d={
left:parseInt(b[1]),top:parseInt(b[2]),blur:b[3]?parseInt(b[3]):undefined,a:b[4]?parseInt(b[4]):undefined}
;
d.c=/inset/.test(a);
d.color=c;
return d}
var f;
e.each(["boxShadow","MozBoxShadow","WebkitBoxShadow"],function(a,b){
a=e("body").css(b);
if(typeof a=="string"&&a!=""){
f=b;
return false}
}
);
if(f)e.fx.step.shadow=function(a){
if(!a.init){
a.b=h(e(a.elem).css(f));
a.end=e.extend({
}
,a.b,h(a.options.curAnim.shadow));
a.init=true}
a.elem.style[f]=i(a.b,a.end,a.pos)}
}
)(jQuery);
CSS代码(style.css):
body,ul,li,h1,h2,h3{margin:0;padding:0;}
body{background:#ddd;font-family:"Myriad Pro",Helvetica,Arial,sans-serif;font-size:12px;overflow:hidden;}
a.pd_next_photo,a.pd_loading{z-index:999999;cursor:pointer;border:1px solid #aaa;width:50px;height:50px;position:absolute;top:50%;left:50%;opacity:0.8;margin:-25px 0px 0px -25px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}
a.pd_loading{display:none;background:#B8B8B8 url(../images/loading.gif) no-repeat 50% 50%;}
a.pd_next_photo{background:#B8B8B8 url(../images/next.png) no-repeat 50% 50%;}
a.pd_next_photo:hover,a.pd_loading:hover{opacity:1.0;}
.pd_options_bar a.viewall,.pd_options_bar a.shuffle,.pd_options_bar a.backdesk{outline:none;padding:0px 15px 0px 50px;line-height:47px;text-decoration:none;font-size:24px;color:#333;text-shadow:1px 1px 1px #f0f0f0;height:50px;float:right;margin:5px 10px 0px 0px;-moz-box-shadow:1px 1px 2px #666;-webkit-box-shadow:1px 1px 2px #666;box-shadow:1px 1px 2px #666;opacity:0.8;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}
.pd_options_bar a.viewall{background:#B8B8B8 url(../images/viewall.png) no-repeat 10px 50%;}
.pd_options_bar a.shuffle{background:#B8B8B8 url(../images/shuffle.png) no-repeat 10px 50%;}
.pd_options_bar a.backdesk{background:#B8B8B8 url(../images/backdesk.png) no-repeat 10px 50%;}
.pd_options_bar a.viewall:hover,.pd_options_bar a.shuffle:hover,.pd_options_bar a.backdesk:hover{opacity:1.0;text-shadow:1px 1px 1px #fff;-moz-box-shadow:1px 1px 2px #fff;-webkit-box-shadow:1px 1px 2px #fff;box-shadow:1px 1px 2px #fff;}
.pd_container{position:absolute;top:50px;bottom:50px;right:50px;left:50px;}
.pd_photo{position:absolute;z-index:10;border:7px solid #f9f9f9;border-bottom:28px solid #f9f9f9;width:170px;height:170px;top:0px;left:0px;display:none;-moz-box-shadow:1px 1px 5px #555;-webkit-box-shadow:1px 1px 5px #555;box-shadow:1px 1px 5px #555;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
.pd_photo img{width:170px;height:170px;}
.pd_photo span.delete{position:absolute;width:16px;height:16px;right:-16px;top:2px;cursor:pointer;background:#fff url(../images/close.png) no-repeat center center;-moz-border-radius:0px 8px 8px 0px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-box-shadow:1px 1px 5px #555;-webkit-box-shadow:1px 1px 5px #555;box-shadow:1px 1px 5px #555;}
.pd_paperball{background:transparent url(../images/paperball.png) no-repeat center center;position:absolute;}
分享到QQ
分享到微博
微信扫一扫
