JavaScript鼠标悬浮展开侧栏导航

2018-7-30 16:01| 作者: antzone| 查看: 460| 评论: 0|来自: 蚂蚁部落

本章节分享一段代码实例,它实现了鼠标悬浮能够展开侧栏导航的效果。

代码来源于论坛会员的一个问题,本站将其优化并改进了一下,原来的代码是有点问题的。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta name="author" content="http://www.softwhy.com/" />
 <title>蚂蚁部落</title>
 <style type="text/css">
body, ul{
  margin:0;
  padding:0;
}
#box{
  width:150px;
  height:200px;
  background:#0CF;
  position:absolute;
  left:-150px;
}
ul li{
  list-style-type:none;
}
ul li a{
  display:block;
  height:28px;
  text-decoration:none;
}
#span {
  width:20px;
  height:80px;
  position:absolute;
  top:70px;
  background:#ffc;
  right:-20px;
}
</style>
<script type="text/javascript">
var timer;
function startMove(){ 
  clearInterval(timer);
  var odiv=document.getElementById("box");
  timer=setInterval(function(){
    if(odiv.offsetLeft>=0){
      clearInterval(timer);
    }
    else{ 
      odiv.style.left=odiv.offsetLeft+3+"px";
    }
  },30);
}
function obMove(){ 
  clearInterval(timer);
  var odiv=document.getElementById("box");
  timer=setInterval(function(){
    if(odiv.offsetLeft<=-150){
      clearInterval(timer);
    }
    else{ 
      odiv.style.left=odiv.offsetLeft-3+"px";
    }
  },30); 
} 
window.onload=function(){  
  document.getElementById("box").onmouseover=startMove;
  document.getElementById("box").onmouseout=obMove;
}
 </script>
 </head>
 <body>
 <div id="box"> 
   <span id="span">分享到</span>
   <ul>
     <li><a href="#">softwhy.com</a></li>
     <li><a href="#">Sina微博</a></li>
     <li><a href="#">朋友圈</a></li>
     <li><a href="#">蚂蚁部落</a></li>
     <li><a href="#">QQ空间</a></li>
   </ul>
 </div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).var timer,声明一个变量用来存储定时器函数的标识。

(2).function startMove(){ },作为onmouseover事件处理函数。

(3).clearInterval(timer),停止上一个定时器方法的执行,如果没有此代码,侧可能出现多个定时器方法共同执行的现象。

(4).var odiv=document.getElementById("box"),获取id属性值为box的元素对象。

(5).timer=setInterval(function(){

  if(odiv.offsetLeft>=0){

    clearInterval(timer);

  }

  else{

    odiv.style.left=odiv.offsetLeft+3+"px";

  }

},30),每隔30毫秒执行一次函数,当然需要判断offsetLeft属性值,关于此属性可以参阅相关阅读。

二.相关阅读:

(1).setInterval()方法可以参阅setInterval()一章节。

(2).offsetLeft属性可以参阅js offsetLeft一章节。

(3).onmouseover事件可以参阅javascript mouseover 事件一章节。

(4).onmouseout事件可以参阅javascript mouseout 事件一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部