可拖拽的相册

Html

Css

* {
	margin:0;
	padding:0;
}
body {
	overflow:hidden;
	background:-webkit-linear-gradient(top,black,white);
}
ul {
	width:960px;
	height:1000px;
	list-style:none;
	margin:10px auto;
}
ul li {
	float:left;
	width:300px;
	height:400px;
	margin:10px;
	box-shadow:0 0 10px rgba(255,255,255,.5);
}
button {
	width:70px;
	height:40px;
	background:lightblue;
	border-radius:10px;
	border:none;
	color:#fff;
	box-shadow:0 0 10px rgba(0,0,0,.1);
	margin:100px 0 0 100px;
	float:left;
	outline:none;
	cursor:pointer;
}
img {
	width:300px;
	height:400px;
}

var move = {
    moreAttrSameTime: function(obj, info, allTime, fn) {

var result = [];

var stepNum = Math.ceil(allTime / (1000 / 60));

for (var key in info) {

var attr = key;

if (attr != "opacity") {
                var init = parseInt(oGet.getStyle(obj, attr));
                var end = parseInt(info[key]);
            } else {
                var init = parseInt(oGet.getStyle(obj, attr) * 100);
                var end = parseInt(info[key] * 100);
            }

var step = (end - init) / stepNum;

var json = {
                "attr": attr,
                "init": init,
                "end": end,
                "step": step,
            }

result.push(json);
        }

var count = 0;

clearInterval(obj.time);

obj.time = setInterval(function() {

for (var i = 0; i < result.length; i++) {

result[i].init += result[i].step;
            }

count++;

if (count == stepNum) {
                //				清除运动计时器
                clearInterval(obj.time);
                for (var i = 0; i < result.length; i++) {
                    result[i].init = result[i].end;
                }
            }
            for (var i = 0; i < result.length; i++) {
                if (result[i].attr != "opacity") {
                    obj.style[result[i].attr] = result[i].init + "px";
                } else {
                    obj.style[result[i].attr] = result[i].init / 100;
                }
            }
        }, 1000 / 60)
    }
}

};

function drag(obj) {
    var disX = 0;
    var disY = 0;
    obj.onmousedown = function(ev) {
        var ev = ev || window.event;
        disX = ev.clientX - obj.offsetLeft;
        disY = ev.clientY - obj.offsetTop;
        obj.style.zIndex = iZIndex++;
        document.onmousemove = function(ev) {
            var ev = ev || event;
            obj.style.left = ev.clientX - disX + 'px';
            obj.style.top = ev.clientY - disY + 'px';

function dis(obj1, obj2) {
    var a = obj1.offsetLeft - obj2.offsetLeft;
    var b = obj1.offsetTop - obj2.offsetTop;
    return Math.sqrt(a * a + b * b);
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

可拖拽的相册



代码描述：可拖拽相册

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

mlll

相关代码

可拖拽的相册

最新