上下滚动的菜单栏

最新推荐文章于 2024-05-24 23:35:12 发布

lin49940

最新推荐文章于 2024-05-24 23:35:12 发布

阅读量834

点赞数

本文链接：https://blog.csdn.net/lin49940/article/details/52749050

版权

参照文章

原生js动画效果（源码解析）

IE6 的话，要加上 left : 0px;

例子里面有单个菜单项，用了一个timer2，如果是多个菜单项的话，那么就把timer2 变成一个数组，加上序列参数，具体实现自己把握。

<!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>上下滚动菜单栏bylin49940</title>

</head>
<body>


<div style="margin:0;padding:0;">
  <a href="#" style="width: 107px; height: 60px;float:left;  text-decoration: none;position: relative; font-weight:bold; ">
  <div style="position: absolute; background: yellow none repeat scroll 0% 0%; top: -60px;">
  <span style="height: 60px; width: 107px; display: block; line-height: 60px;">lin1</span>
  <span style="padding: 0px; line-height: 60px;">lin2</span>
  </div></a>

  <a href="#" οnmοuseοver="startDown(this,0);" οnmοuseοut="startUp(this,-60);"
  style="width: 107px; height: 60px;float:left;  text-decoration: none;position: relative; font-weight:bold; overflow: hidden;">
  <div style="position: absolute; background: yellow none repeat scroll 0% 0%; left:0px; top: -60px;">
  <span style="background: #f0f;height: 60px; width: 107px; display: block; line-height: 60px;">lin3</span>
  <span style="padding: 0px; line-height: 60px;" >lin4</span>
  </div></a>
</div>

</body>
</html>
<script language="javascript">

//注明：offsetWidth = width+padding+border
//offsetHeight = height+padding+border
//offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)
//offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)
/*
offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。
offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)。
当offsetParent为body时情况比较特殊:
在IE8/9/10及Chrome中，offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(当前元素的margin-left)。
在FireFox中，offsetLeft = (body的margin-left)+(body的padding-left)+(当前元素的margin-left)。
offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。
总的来说两条规则：
1、如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
2、如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。
*/

var timer2 = null;
function startDown(obj,itarget){//目标值
 clearInterval(timer2);//执行当前动画同时清除之前的动画
 var odiv = obj;
 var div2 = null;
 div2 = obj.getElementsByTagName("div")[0];
 timer2 = setInterval(function(){
 var speed = 0;
  if(div2.offsetTop >= itarget){
  clearInterval(timer2);
 }else{
  speed = 2;
  div2.style.top = div2.offsetTop+speed+'px';
  }
 },30);
}
function startUp(obj,itarget){//目标值
 clearInterval(timer2);//执行当前动画同时清除之前的动画
 var odiv = obj; 
 var div2 = null;
 div2 = obj.getElementsByTagName("div")[0];
 timer2 = setInterval(function(){
 var speed = 0;
 
 if(div2.offsetTop <= itarget){
  clearInterval(timer2);
 }else{
  speed = -2;
  div2.style.top = div2.offsetTop+speed+'px';
  }
 },30);
}

</script>

lin49940

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
上下滚动的菜单栏

参照文章原生js动画效果（源码解析）上下滚动菜单栏bylin49940 lin1 lin2 <a href="#" onmouseover="startDown(this,0);" onmouseout="startUp(this,-60);" style="width: 107px; height: 60px;float:l
复制链接

扫一扫