导航左右移动.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>

前端开发案例--360首页左右滑动导航

jQuery实现360首页左右滑动效果! 涉及知识:addClass()、removeClass()、siblings()、index()、eq()、stop()、animate()、css()...
  • macanfa
  • macanfa
  • 2016年05月18日 23:18
  • 1055

很好用的移动端左右滑动导航特效

页面标题 html{color:#000;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text...
  • daimomo000
  • daimomo000
  • 2017年09月19日 14:24
  • 1763

html中上下左右控制对象移动Demo

做了这样一个小Demo,按上下左右,控制一个图片在另一个图片上移动。 代码如下: title document.onkeydown=function(event){ var e...
  • u014597198
  • u014597198
  • 2016年08月26日 12:57
  • 2257

javascript实现图片左右移动动画

图片的左右移动,具备像荡秋千一样的动画效果,图片自己可重新定义,移动速度和距离也可在代码内设定,挺简单的Js生成动画的特效代码,仅供参考。 html> html> head lang="en">...
  • xy8199
  • xy8199
  • 2017年10月10日 19:46
  • 439

超级简单实现内容的左右移动js+jquery+html

无标题文档 #one ,#three{ border:1px dashed #999; width:100px; height:300px; position:relative; ...
  • php_jiang
  • php_jiang
  • 2012年03月21日 21:38
  • 2159

实现图片左右移动

js引入 HTML代码: css代码: *{margin:0;padding:0;list-style...
  • u014189045
  • u014189045
  • 2015年12月10日 15:49
  • 605

HTML5 元素拖动 - 实现元素左右拖动

1、拖放(Drag 和 drop)是 HTML5 标准的组成部分。   拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放...
  • daimomo000
  • daimomo000
  • 2017年02月22日 13:41
  • 328

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

WebApp图标导航实例 .swipe { overflow: hidden; visibility: hidden; ...
  • tuwei123
  • tuwei123
  • 2015年12月03日 16:01
  • 5861

移动端模拟导航可点击自动滑动

移动端模拟导航可点击自动滑动 0.1.4。 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围【依赖于iscroll.js】。 废话不多说直接上代码: /* * 移动端模拟导航...
  • xw505501936
  • xw505501936
  • 2017年01月11日 11:01
  • 1897

HTML5的canvas实现一个球的左右移动

HTML5的canvas实现一个球的左右移动
  • nevergiveup12345
  • nevergiveup12345
  • 2015年08月08日 17:42
  • 2543
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:导航左右移动.html
举报原因:
原因补充:

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