js 相册删除效果

修正某些情况下图片不自动对齐的bug

View Code 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML XMLNS:ELEMENT>
<html>
<head>
<title>::move::</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
body{
    padding:0px;
    background-color:white;
}
#panel{
    position:absolute;
}
#panel>div{
    border-top-left-radius:5px; 
    border-top-right-radius:5px;
    border-bottom-left-radius:5px; 
    border-bottom-right-radius:5px;
    box-shadow:3px 3px 5px #5f5f5f;
    opacity:1;
    filter:alpha(opacity=100);
}
#recycle{
    position:absolute;
    top:600px;
    left:20px;
    width:200px;
    height:200px;
}
</style>
</head>
<body>
<div id="panel"></div>
<div id="recycle"><img width="200" height="200" src="http://www.027wb.com/UploadFiles/2011-08/admin/20110831115140341.png" /><br/>
<button onclick="doMove(this,document.getElementById('panel'))">删除</button></div>
</body>
</html>


<script type="text/javascript">
var color = "darkcyan";
var color_ = "tomato";
var height = 130;
var width = 160;
var xDivs = 7;
var yDivs = 4;
var aSelected = new Array();
var aTempObj = new Array();
var tempLen = 0;
//初始化 
var aImg = new Array("http://www.zgmxct.com/_m_gw_yqnvZxsIrrq9KAC-7TKGELV5NCOmf4ChJJ6VRHs5KvK3PhR2zUA5cJh6clvm1YOYin447qW4KKLPelWM70KDL5TJIPvTnQw6JMAV59_qPLM=.jpg","http://imgsrc.baidu.com/forum/pic/item/480d8444ebf81a4cb04dfcb6d72a6059252da614.jpg","http://imgsrc.baidu.com/forum/pic/item/b23d708da97739122e59951ef8198618367ae214.jpg","http://img2.nuabc.net:6080/edpe/2610525237355.jpg","http://imgsrc.baidu.com/forum/pic/item/7593c8ef76094b3655a11876a3cc7cd98d109d3c.jpg","http://i1.ce.cn/biz/news/201208/21/W020120821510438480043.jpg","http://i3.ce.cn/biz/news/201208/21/W020120821510439025071.jpg");

(function(){
    for(var i = 0;i < yDivs;i++) {
        for(var j = 0;j < xDivs;j++) {
            var oD = new divFactory(i + "_" + j,i * (height + 10),j * (width + 10),width,height);
            oD.setText("<img width='" + width + "' src='" + aImg[(Math.ceil(Math.random() * 2) > 1)?i:j] + "'>");
            oD.draw();
            aTempObj.push(oD);
        }
    }
})();

//select
function doSelect(o,p){
    o.remove();
    if(o.getSld()){
        o.setSld(false);
        o.setBgcolor(color);
        o.draw();
    } else {
        o.setSld(true);
        o.setBgcolor(color_);
        o.draw();
    }
}

//move
function doMove(o,p){
        //获取选中项
        for(var i = 0;i < aTempObj.length;i++){
            if(aTempObj[i].getSld()){
                aSelected.push(aTempObj[i]); 
            }
        }
        tempLen = aSelected.length;
        //移动
        for(var i = 0;i < aSelected.length;i++){
            moveByStep(aSelected[i],600,20,p,i);
        }

        setTimeout(function(){
            var len = aTempObj.length - tempLen;
            var c = 0;
            for(var i = 0;i < yDivs;i++){
                for(var j = 0;j < xDivs;j++){
                    if(!document.getElementById(aTempObj[c].getId())) {
                        aTempObj.splice(c,1);
                        j--;
                        continue;
                    }
                    aTempObj[c].remove();
                    aTempObj[c].setTop(i * (height + 10));
                    aTempObj[c].setLeft(j * (width + 10));
                    aTempObj[c].setSld(false);
                    aTempObj[c].setBgcolor(color);
                    aTempObj[c].draw();    
                    c++;
                }
            }
            c = 0;
            aSelected = new Array();
        },tempLen * 30 + 300); 
}

//doMove
function moveByStep(o,t,l,p,i){
    var top = o.getTop();
    var left = o.getLeft();
    var dt = parseInt((t - top) / 10);
    var dl = parseInt((l - left) / 10);
    var index = 0;
    var timer = window.setInterval(function(){
        o.remove();
        o.setTop(o.getTop() + dt);
        o.setLeft(o.getLeft() + dl);
        o.draw();
        index++;
        if(index == 10){
            window.clearInterval(timer);
            o.remove();
            o.setZIndex(-1 * (i + 1));
            o.setTop(t + (i + 1));
            o.setLeft(l + (i + 1));
        }
    },10);
}

//div factory
function divFactory(id,t,l,w,h) {
    //private
    var id = id;
    var top = t + "px";
    var left = l + "px";
    var width = w + "px";
    var height = h + "px";
    var sld = false;
    var bgcolor = color;
    var self = this;
    var _parent = document.getElementById("panel");
    var zIndex = 0;
    var text = "";
    //public
    this.getId = function() {
        return id;
    }
    this.setTop = function(t) {
        top = t + "px";
    }
    this.getTop = function() {
        return parseInt(top.substring(0,top.indexOf("p")));
    }
    this.setLeft = function(l) {
        left = l + "px";
    }
    this.getLeft = function() {
        return parseInt(left.substring(0,left.indexOf("p")));
    }
    this.setBgcolor = function(c) {
        bgcolor = c;
    }
    this.setSld = function(b){
        sld = b;
    }
    this.getSld = function() {
        return sld;
    }
    this.setZIndex = function(z) {
        zIndex = z;
    }
    this.setText = function(t){
        text = t;
    }
    this.remove = function() {
        _parent.removeChild(document.getElementById(id));
    }
    this.draw = function() {
        var oDiv = document.createElement("div");
        oDiv.id = id;
        oDiv.style.position = "absolute";
        oDiv.style.top = top;
        oDiv.style.left = left;
        oDiv.style.width = width;
        oDiv.style.height = height;
        oDiv.style.lineHeight = height;
        oDiv.style.backgroundColor = bgcolor;
        oDiv.style.border = "solid 1px #7f9fcf";
        oDiv.style.cursor = "pointer";
        oDiv.style.zIndex = zIndex;
        oDiv.title = id;
        oDiv.innerHTML = text;
        oDiv.onclick = function(){
            doSelect(self,_parent);
        }
        _parent.appendChild(oDiv);
    }
}
</script>

posted on 2012-08-21 17:06  hey,jude  阅读(801)  评论(0)  编辑  收藏  举报