html和css写在一起方便看,div通过定位设置为-200隐藏,span也是通过定位定在div靠左的中间
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
} div {
width: 200px;
height: 200px;
background: green;
position: relative;
left: -200px;
} span {
width: 30px;
height: 30px;
line-height: 30px;
background: red;
position: absolute;
left: 200px;
top: 85px;
text-align: center;
cursor: pointer;
}
</style>
</head> <body>
<div id="div">
<span id="show">show</span>
</div> </body> </html>
js部分是通过添加定时器设置offsetLeft值的自增和自减，来达到div显示和隐藏的效果
<script>
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
} window.onload = function() {
//定义了隐藏的div为pto
var pto = $("div");
//定义了按钮span为 btn
var btn = $("show");
//定义一个空的定时器
var timer = null; //按钮绑定一个鼠标移进事件
btn.onmouseenter = start; //自定义函数用于自动增加
function start() {
//防止自加速,每次开始前都要清除定时器
clearInterval(timer);
//定义一个定时器
timer = setInterval(show, 30);
} //自定义函数,直到offsetLeft的值为0,否则offsetLeft的值从-200一直自增5
function show() {
if (pto.offsetLeft == 0) {
clearInterval(timer);
} else {
pto.style.left = pto.offsetLeft + 5 + 'px';
}
} //绑定一个鼠标移出事件
btn.onmouseleave = back; //自定义函数,用于自动减少
function back() {
clearInterval(timer);
timer = setInterval(clear, 30);
} //自定义函数，直到offsetLeft的值为-200，否则offsetLeft的值一直自减5
function clear() {
if (pto.offsetLeft == -200) {
clearInterval(timer);
} else {
pto.style.left = pto.offsetLeft - 5 + 'px';
}
} }
</script>