//鼠标点击展开, 移出鼠标收缩
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)
};
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
#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;
}鼠标点击展开, 移出鼠标收缩
猜你喜欢
转载自blog.csdn.net/qq_37995109/article/details/85166302
今日推荐
周排行