<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 200px;
height: 250px;
background: rebeccapurple;
position: absolute;
left: -200px;
}
#div1 span{
width: 20px;
position: absolute;
background: red;
top: 80px;
right: -20px;
color: white;
}
</style>
<script>
window.onload=function () {
var oDiv = document.getElementById("div1");
oDiv.onmouseover=function () {
move(0,10);
}
oDiv.onmouseout=function () {
move(-200,-10);
}
}
var timer=null;
function move(target,speed) {
var oDiv = document.getElementById("div1");
clearInterval(timer);
timer=setInterval(function () {
if(oDiv.offsetLeft==target)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30)
}
</script>
</head>
<body>
<div id="div1">
<span id="span1">分享到</span>
</div>
</body>
</html>
JS侧边栏的显示和消失
最新推荐文章于 2023-02-15 17:05:46 发布