鼠标点击展开, 移出鼠标收缩

//鼠标点击展开, 移出鼠标收缩

window.onload = function() {
    var oDiv = document.getElementById('div1');
    //鼠标移入
    oDiv.onmouseover = function() {
        startMove(0);
    };
    //鼠标移出
    oDiv.onmouseout = function() {
        startMove( - 100);
    };
}
var timer = null;
function startMove(iTarget) {
    var oDiv = document.getElementById('div1');

    //清除定时器
    clearInterval(timer);

    var iSpeed = 0;
    //计算速度
    if (oDiv.offsetLeft < iTarget) {
        iSpeed = 10;
    } else {
        iSpeed = -10;
    };

    timer = setInterval(function() {
        if (oDiv.offsetLeft == iTarget) {
            clearInterval(timer);
        } else {
            oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
        }
    },
    30)
};


    

        分享到
    

#div1 {
	width: 100px;
	height: 200px;
	background: #ccc;
	position: absolute;
	left: -100px;
}

#div1 span {
	width: 20px;
	height: 60px;
	line-height: 20px;
	text-align: center;
	left: 100px;
	top: 70px;
	background: yellow;
	position: absolute;
}