js多图片展开收缩

Html

Css

body {
	margin:0;
}
ul {
	margin:0;
	padding:0;
	width:330px;
	margin:100px auto 0;
	position:relative;
}
li {
	width:100px;
	height:100px;
	background:red;
	float:left;
	list-style:none;
	margin:10px 0 0 10px;
}

function startMove(obj, json, fn) {
    clearInterval(obj.iTimer);
    var iCur = 0;
    var iSpeed = 0;
    obj.iTimer = setInterval(function() {

var iBtn = true;

for (var attr in json) {
            var iTarget = json[attr];
            if (attr == "opacity") {
                iCur = Math.round(css(obj, "opacity") * 100);
            } else {
                iCur = parseInt(css(obj, attr));
            }

iSpeed = (iTarget - iCur) / 8;

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

if (iCur != iTarget) {
                iBtn = false;
                if (attr == "opacity") {
                    obj.style.opacity = (iCur + iSpeed) / 100;
                    obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
                } else {
                    obj.style[attr] = iCur + iSpeed + 'px';
                }
            }

}
        if (iBtn) {
            clearInterval(obj.iTimer);
            fn && fn.call(obj);
        }

}, 30);
}

function css(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

window.onload = function() {
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName("li");
    var arr = [];
    var zIndex = 1;

for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.left = aLi[i].offsetLeft + "px";
        aLi[i].style.top = aLi[i].offsetTop + "px";
        arr.push({
            left: aLi[i].offsetLeft,
            top: aLi[i].offsetTop
        });
    }
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].index = i;
        //					在用js去设置css样式的时候:在同一个代码块中,有些css样式的设置的权限要高于其他样式
        //					aLi[i].style.left=aLi[i].offsetLeft+"px";
        //					aLi[i].style.top=aLi[i].offsetTop+"px";

aLi[i].style.left = arr[i].left + "px";
        aLi[i].style.top = arr[i].top + "px";
        aLi[i].style.position = "absolute";
        aLi[i].style.margin = "0px";

aLi[i].onmouseover = function() {
            this.style.background = "green";
            this.style.zIndex = zIndex++;
            startMove(this, {
                width: 200,
                height: 200,
                left: arr[this.index].left - 50,
                top: arr[this.index].top - 50
            })
        }
        aLi[i].onmouseout = function() {
            this.style.background = "red";
            startMove(this, {
                width: 100,
                height: 100,
                left: arr[this.index].left,
                top: arr[this.index].top
            })
        }
    }
}

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

立即下载

js多图片展开收缩



代码描述：多图片的展开收缩

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

小叶

相关代码

js多图片展开收缩

最新