导航左右移动.html

原创 2013年12月02日 11:37:10

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<title>Document</title>
<style type="text/css">
 .block { width:100px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
 room_block(); 
});

/* 选择房间导航的分页 */
function show_block(a,b,c){
 for(var i=a;i<=c;i++){
  $("#block"+i+"").hide();
  if(i<=b&&i>=a){
   $("#block"+i+"").show();
  }
  else{
   $("#block"+i+"").hide();
  } 
 }
}
function room_block(){
 var max_num=9;
 var next_hide_block=1;
 var next_show_block=6; 
 show_block(next_hide_block,next_show_block,max_num);
//上一个,id>1;点击向左移动的按钮,隐藏从最大开始开始
 $("#prev_num").click(function(){
  if(next_hide_block>=2){
   next_hide_block--;
   next_show_block--;
   show_block(next_hide_block,next_show_block,max_num);   
  }
  else{
   alert("已经是最左了");
  }
  
 });
//下一个,id>6&&id<max;点击向右移动的按钮,隐藏从1开始,显示从7开始
 $("#next_num").click(function(){  
  if(max_num>next_show_block&&next_show_block>=6){
   next_show_block++;  
   $("#block"+next_hide_block+"").hide();
   $("#block"+next_show_block+"").show();
   next_hide_block++; 
  }
  else{
   alert("已经最右了");
  }
 });
}

</script>
</head>
<body>
<table class="equip_nav" cellpadding="0" cellspacing="0"><tr>
 <td width="20" align="center"><a href="#" id="prev_num"><span><<</span></a></td>
 <td width="20"><span>|</span></td>
 <td><table class="block" id="block1"><tr><td><span><a href="#">1</a></span></td><td><span>|</span></td></tr></table></td>
 <td><table class="block" id="block2"><tr><td><span><a href="#">2</a></span></td><td><span>|</span></td></tr></table></td>
 <td><table class="block" id="block3"><tr><td><span><a href="#">3</a></span></td><td><span>|</span></td></tr></table></td>
 <td><table class="block" id="block4"><tr><td><span><a href="#">4</a></span></td><td><span>|</span></td></tr></table></td>
 <td><table class="block" id="block5"><tr><td><span><a href="#">5</a></span></td><td><span>|</span></td></tr></table></td>
 <td><table class="block" id="block6"><tr><td><span><a href="#">6</a></span></td><td><span>|</span></td></tr></table></td>
 <td><table class="block" id="block7"><tr><td><span><a href="#">7</a></span></td><td><span>|</span></td></tr></table></td>
 <td><table class="block" id="block8"><tr><td><span><a href="#">8</a></span></td><td><span>|</span></td></tr></table></td>
 <td><table class="block" id="block9"><tr><td><span><a href="#">9</a></span></td><td><span>|</span></td></tr></table></td>
 <td width="20" align="center"><a href="#" id="next_num"><span>>></span></a></td>       
</tr></table>
</body>
</html>

相关文章推荐

WebApp图标导航HTML5实例-支持手机左右滑动

WebApp图标导航实例 .swipe { overflow: hidden; visibility: hidden; ...

html5 中导航栏中菜单过长,在Div上层添加提示左右滑动的箭头,使用Hello mui功能

使用hello mui主要设计,一开始不知道怎么做,后来突然想到使用position:absoulte;可以将元素固定到某一位置,所以就在和导航栏同一DIV级别的地方添加了span元素,虽然图表没有特...

HTML5最终取代APP?移动互联网现“左右互搏”

HTML5最终取代APP?移动互联网现“左右互搏” 摘要: 一切都在重演。这是移动互联版《上帝也疯狂》的续集,上次的主角是App,现在则是HTML5:一个将近十年前就被提出来的用于取代HTML4...

js html 轮播图 支持移动端左右滑动 pc也能用

引用:http://download.csdn.net/detail/zw200813ht/7326281 最初版本是这个。有几个bug修改了一下(滑动之后就不能自动滚动了),添加了一个helper...

HTML5实战与剖析之移动端IOS系统收缩地址导航栏功能

前些日子为大家倾囊为大家分享了一些有关移动端的结构与标签的相关介绍,今天将继续为大家介绍的则是一个小小的功能,那就是移动端IOS系统收缩地址导航栏功能。以上便是有关HTML5实战与剖析之移动端IOS系...

小强的HTML5移动开发之路(43)——JqueryMobile页眉、工具栏和标签栏导航

一、页眉1、添加页眉 默认的页眉在屏幕的顶部边缘显示,而且在在屏幕滚动时,页眉会滑出屏幕之外,通过添加data-position属性可以创建一个固定的页眉 可以使用date-theme属性来调整页眉的...

vue + vue-touch 来实现移动端左右导航效果(有点像京东移动站导航)

vue + vue-touch 来实现移动端左右导航效果(有点像京东移动站导航)使用技术:vue2.0 webpack vue-touch 一些简单的javascript; (注意:vue-touc...

js左右侧悬浮导航栏

  • 2014年12月25日 12:33
  • 910B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:导航左右移动.html
举报原因:
原因补充:

(最多只允许输入30个字)