文字菜单左右翻屏效果

<!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> 
  <link rel="stylesheet" href="css/index.css" /> 
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
  <script type="text/javascript">
      $(
      function(){
      var menu_width=$("#menu").width();//菜单外容器的宽度，该值是固定的，根据分辨率的大小而改变。
      //alert(menu_width);
      var menucont_width=$("#menucont").width();//菜单内容器的宽度，该内容器的宽度根据菜单的多少而确定
      //alert(menucont_width);

      //向左移动
      $("#arrowl").click(function(){

      var currentw=parseInt($("#menucont").css("left"));//点击向左按钮时查看当前菜单居左的位置
      //alert("menucont_width:"+menucont_width);
      var re_width=currentw+menu_width;//重新计算后的宽度,翻屏的时候是根据外容器确定的，向左移动多少是个负值，因此用外容器的宽度加上内容器向左的距离，就是点击向右按钮向右移动的距离，
      //alert(re_width);
      if(re_width>0){//左边到头
      return false;
      }
      $("#menucont").animate({left: re_width}, "slow");
      }
      );

      //向右移动
      $("#arrowr").click(function(){
      var currentw=parseInt($("#menucont").css("left"));
      //alert("当前向左宽度："+currentw);
      //alert("文字容器总的宽度："+menucont_width);
      if((currentw+menucont_width)<menu_width)//右边到头
      {
      return false;
      }

      $("#menucont").animate({left: "-="+menu_width+""}, "slow");

      }
      );
      }
      );
</script> 
 </head> 
 <body> 
  <div id="menubox"> 
   <div id="arrowl">
     &lt; 
   </div> 
   <div id="menu"> 
    <div id="menucont"> 
     <a href="#">综合数据</a>
     <a href="#">综合数据</a>
     <a href="#">综合数据</a>
     <a href="#">青岛财税网</a>
     <a href="#">综合数据</a>
     <a href="#">综合数据</a>
     <a href="#">青岛国税</a>
     <a href="#">青岛国税</a>
     <a href="#">青岛国税</a>
     <a href="#">山东国税</a>
     <a href="#">青岛国税</a>
     <a href="#">青岛国税</a>
     <a href="#">青岛国税</a>
     <a href="#">济南国税</a>
     <a href="#">济南国税2</a>
     <a href="#">济南国税3</a>
     <a href="#">国税内网4</a>
     <a href="#">济南国税5</a>
     <a href="#">网上办税6</a>
     <a href="#">综合数据7</a>
     <a href="#">综合数据8</a>
     <a href="#">综合数据</a>
     <a href="#">青岛财税网</a>
     <a href="#">综合数据</a>
     <a href="#">综合数据</a>
     <a href="#">青岛国税</a>
     <a href="#">青岛国税</a>
     <a href="#">青岛国税</a>
     <a href="#">山东国税</a>
     <a href="#">青岛国税</a>
     <a href="#">青岛国税</a>
     <a href="#">青岛国税</a>
     <a href="#">济南国税</a>
     <a href="#">济南国税</a>
     <a href="#">济南国税</a>
     <a href="#">国税内网</a>
     <a href="#">济南国税</a>
     <a href="#">网上办税</a> 
    </div> 
   </div> 
   <div id="arrowr">
     &gt; 
   </div> 
  </div>  
 </body>
</html>

body {
    margin: 0 auto;
    font-size: 12px;
    font-family: "宋体",Verdana,Arial,Tahoma;
}

form, ul, dt, dd, dl, p, h1, h2, h3, h4, h5, h6, h7 {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    border: none;
}

.clear {
    overflow: hidden;
    clear: both;
}

a {
    color: #555555;
    text-decoration: none;
}

a:hover {
    color: #555555;
    text-decoration: underline;
}

input, select, button {
    font: 12px Verdana,Arial,Tahoma;
    vertical-align: middle;
}

#menubox {
    background: #164671;
    color: #fff;
    width: 100%;
    height: 26px;
    line-height: 26px;
    vertical-align: middle;
    border: 1px solid #dedede;
    margin: 0 auto;
}

#arrowl,#arrowr {
    float: left;
    width: 3%;
    background: red;
    text-align: center;
    cursor: pointer;
    font-size: 15px;
}

#arrowr {
    float: right;
}

#menu {
    float: left;
    width: 94%;
    height: 26px;
    overflow: hidden;
    position: relative;
}

#menucont {
    position: absolute;
    line-height: 26px;
    vertical-align: middle;
    white-space: nowrap;
    left: 0px;
}

#menucont a {
    color: #fff;
    margin: 0px 6px;
    font-size: 13px;
}

posted @ 2019-03-01 10:02 xiaobingch 阅读(236) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

xiaobingch

文字菜单左右翻屏效果

公告

搜索

我的标签

随笔分类 (195)

随笔档案 (189)

阅读排行榜

推荐排行榜