js鼠标移入放大效果

Html

Css

* {
	margin:0;
	padding:0;
}
img {
	border:0;
}
ol,ul,li {
	list-style:none;
}
ul {
	width:450px;
	height:450px;
	border:1px solid #ccc;
	margin:20px auto;
	padding:5px;
	position:relative;
}
li {
	width:100px;
	height:100px;
	border:1px solid #ccc;
	background:#eee;
	float:left;
	margin:5px;
	z-index:1;
}

window.onload = function() {
    var oBox = document.getElementById("box");
    var oLi = oBox.getElementsByTagName("li");

var arrT = [];
    var arrL = [];

var Zindex = 2;

for (var i = 0; i < oLi.length; i++) {
        arrT.push(oLi[i].offsetTop);
        arrL.push(oLi[i].offsetLeft);
    }

for (var i = 0; i < oLi.length; i++) {
        oLi[i].style.position = "absolute";
        oLi[i].style.margin = "0";
        oLi[i].style.left = arrL[i] + "px";
        oLi[i].style.top = arrT[i] + "px";
    }

for (var i = 0; i < oLi.length; i++) {
        oLi[i].index = i;
        oLi[i].oTime = null;
        oLi[i].onmouseover = function() {
            myMove(this, {
                width: 200,
                height: 200,
                top: (arrT[this.index] - 50),
                left: (arrL[this.index] - 50)
            })

this.style.zIndex = Zindex;
            Zindex++;
        }
        oLi[i].onmouseout = function() {

myMove(this, {
                width: 100,
                height: 100,
                top: arrT[this.index],
                left: arrL[this.index]
            })

}
    }
}

function getStyle(obj, iStyle) {
    if (obj.currentStyle) {
        return obj.currentStyle[iStyle];
    } else {
        return getComputedStyle(obj, 1)[iStyle];
    }
}

var jStop = true;

function myMove(obj, json) {
    clearInterval(obj.oTime);
    obj.oTime = setInterval(function() {
        for (var jsonStyle in json) {

var oCur = parseInt(getStyle(obj, jsonStyle));

if (json[jsonStyle] != oCur) {
                jStop = false;
            } else {
                jStop = true;
            }

var iSpeed = (json[jsonStyle] - oCur) / 8;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

if (json[jsonStyle] == oCur) {
                if (jStop) {
                    clearInterval(oTime);
                }
            } else {
                obj.style[jsonStyle] = oCur + iSpeed + "px";
            }
        }
    }, 30)
}

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

立即下载

js鼠标移入放大效果



代码描述：鼠标移入对应的方格，该格子放大，移出缩小

鼠标移入对应的方格，该格子放大，移出缩小

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

qready

相关代码

js鼠标移入放大效果

最新