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

最新推荐文章于 2021-08-03 19:40:01 发布

Lvdon9

最新推荐文章于 2021-08-03 19:40:01 发布

阅读量346

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_37995109/article/details/85166302

版权

JavaScript 专栏收录该内容

106 篇文章 0 订阅

订阅专栏

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

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;
}

Lvdon9

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
鼠标点击展开, 移出鼠标收缩

//鼠标点击展开, 移出鼠标收缩window.onload = function() { var oDiv = document.getElementById('div1'); //鼠标移入 oDiv.onmouseover = function() { startMove(0); }; //鼠标移出 oDiv.onmouseo...
复制链接

扫一扫

专栏目录