验证中...
侧边栏
原始数据 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slidebar</title>
<style>
.slidebar{
position: fixed;
top:300px;
left:0;
width:100px;
height: 200px;
background-color: pink;
}
.text{
width:20px;
background-color:orange;
font:bold 16px "Microsoft YaHei";
color:white;
padding:6px;
position: absolute;
left:100px;
top:60px;
}
</style>
</head>
<body>
<div class="slidebar">
<div class="text">悬停隐藏</div>
</div>
<script>
//获取slidebar元素
var div = document.querySelector(".slidebar");
var timer = null;//定义一个变量存放定时器
div.onmouseover = function(){
start(-100);
}
div.onmouseout = function(){
start(0);
}
var start = function(target){
var speed;//控制速度
clearInterval(timer);//先清除一下定时器,保证每次鼠标悬停时只开启一个定时器
if(div.offsetLeft < target){
speed = 10;
}else{
speed = -10;
}
timer = setInterval(function(){//开启定时器进行运动
if(div.offsetLeft == target){
clearInterval(timer);
}else{
div.style.left = div.offsetLeft + speed + "px";
}
},30)
}
</script>
</body>
</html>

评论列表( 0 )

你可以在登录后,发表评论

9_float_left_people 9_float_left_close