总的来说就是利用 鼠标悬停 onmouseover 和 鼠标移除 onmouseout 这两个时间来完成的。
首先是 html 结构
- <body>
- <div id="div1">
- <span>
- 侧边栏
- </span>
- </div>
- </body>
然后是 CSS 的样式:
- #div1{
- width:150px;
- height:200px;
- background:#999999;
- position:absolute;
- left:-150px;}
- span{
- width:20px;
- height:70px;
- line-height:23px;
- background:#09C;
- position:absolute;
- right:-20px;
- top:70px;}
默认的样式 侧边栏是隐藏起来的如图:
当鼠标移入以后如图:
下面是完整代码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <style type="text/css">
- #div1{
- width:150px;
- height:200px;
- background:#999999;
- position:absolute;
- left:-150px;}
- span{
- width:20px;
- height:70px;
- line-height:23px;
- background:#09C;
- position:absolute;
- right:-20px;
- top:70px;}
- </style>
- <script>
- window.onload=function(){
- var odiv=document.getElementById('div1');
- odiv.onmouseover=function ()
- {
- startmove(0,10);//第一个参数为div left属性的目标值 第二个为 每次移动多少像素
- }
- odiv.onmouseout=function ()
- {
- startmove(-150,-10);
- }
- }
- var timer=null;
- function startmove(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>
侧边栏
来源: http://www.phperz.com/article/17/0416/276966.html