js實現自動隱藏側邊欄
阿新 • • 發佈:2019-02-05
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html charset=utf-8" http-equiv="Content-Type">
<title>Title</title>
<script>
function demo1(){
var content=document.getElementById("content" );
var tag=document.getElementById("tag");
var ispeed=5;
timer=null;
time2=null;
tag.onmouseover=content.onmouseover=function (ev) {
clearInterval(timer);
clearInterval(time2);
timer=setInterval(function(){
if (content.offsetLeft>=0){
clearInterval(timer);
}else{
content.style.left=content.offsetLeft+ispeed+"px";
tag.style.left=tag.offsetLeft+ispeed+"px";
}
},30);
}
tag.onmouseout=content.onmouseout=function (ev) {
clearInterval(time2);
clearInterval(timer);
time2=setInterval(function(){
document.title=content.offsetLeft+"";
if(tag.offsetLeft<=0){
clearInterval(time2);
}else{
content.style.left=content.offsetLeft-ispeed+"px";
tag.style.left=tag.offsetLeft-ispeed+"px";
}
},30);
}
}
</script>
<style>
#content{width:100px;height:200px;background-color: #cccccc;position:absolute;top:20px;left:-100px;}
#tag{width:30px;height:80px;background-color: #FFCC00;text-align: center;position:absolute;left:0px;top:50px;}
</style>
</head>
<body>
<div id="content"></div>
<div id="tag">分享到</div>
<script>
demo1();
</script>
</body>
</html>
使用js程式碼實現的,很少會寫js程式,嘗試寫了一個,處理個半天,