自动分页的导航模式

最新推荐文章于 2024-08-16 22:38:33 发布

liudaoru

最新推荐文章于 2024-08-16 22:38:33 发布

阅读量67

点赞数

分类专栏： Ajax 文章标签： JavaScript CSS HTML Blog ViewUI

Ajax 专栏收录该内容

158 篇文章 0 订阅

订阅专栏

用户只需按照顺序添加即可，翻页有系统自动实现。

js 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" type="text/javascript"
src="http://misc.home.news.cn/js/trs/blog/admin/admin_base.js"></script>
<script language="JavaScript" type="text/JavaScript">
window.onload = function() {
//windowInit();
newWinInit();
}
var MOVEABLE = false;
var groups = new Array();
var groups_size = 0;
var groups_cur = 0;
function newWinInit(){
var con = $("mainInner");
var items = con.innerHTML.split("┆");
var str = "";
var k = 0;
var group_children_size = 10;
//第一页为14个，以后每页为10个
for(var i = 0; i < items.length; i += 1) {
if(i < 13) {
str += items[i] + "┆";
continue;
}
else if(i == 13) {
str += items[i];
groups[k++] = str;
str = "";
continue;
}
if((i - 14) % group_children_size != group_children_size - 1 && i != items.length - 1) {
//如果不是最后一列，并且不是最后一个，则继续拼接字符串
str += items[i] + "┆";
}
else {
str += items[i];
groups[k++] = str;
str = "";
}
}
if(i < 13) {
groups[k++] = str;
}
groups_size = groups.length;
groups_cur = 0;
con.innerHTML = groups[0];
//左移的事件
$("leftTag").onmouseover = function() {
this.className = "leftion1";
}
$("leftTag").onmouseout = function() {
this.className = "leftion";
}
//右移的事件
$("rightTag").onmouseover = function() {
this.className = "rightion1";
}
$("rightTag").onmouseout = function() {
this.className = "rightion";
}
//单击时切换显示
$("leftTag").onclick = function() {
if(groups_cur < 1) {
groups_cur = groups_size;
}
var obj = $("mainInner");
while(obj.hasChildNodes()) {
obj.removeChild(obj.childNodes[0]);
}
obj.innerHTML = groups[--groups_cur];
$("typeTag").innerHTML = eval(groups_cur + 1);
}
//右移的事件
$("rightTag").onclick = function() {
if(groups_cur >= groups_size - 1) {
groups_cur = -1;
}
var obj = $("mainInner");
while(obj.hasChildNodes()) {
obj.removeChild(obj.childNodes[0]);
}
obj.innerHTML = groups[++groups_cur];
$("typeTag").innerHTML = eval(groups_cur + 1);
}
}
//当点中时高亮
var old_tarObj = null;
function showCurObj(evt) {
var tarObj = null;
if(window.event) {
tarObj = window.event.srcElement;
}
else {
tarObj = evt.target;
}
//如果是导航链接项
if(tarObj.tagName.toLowerCase() == "a" && tarObj.target == "leftFrame") {
if(old_tarObj) {
old_tarObj.style.cssText = "";
}
tarObj.style.cssText = "color: #fffa00;font-weight:600;";
old_tarObj = tarObj;
}
delete tarObj;
}
</script>
<link href="http://misc.home.news.cn/blog/css/top.css"
rel="stylesheet" type="text/css">
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0"
>
<tr>
<td align="center" valign="top" class="tdbg"
style="padding-right:10px;">
<div id="username" align="right">
</div>
<div id="mainmenu" align="right">
1
<span οnclick="showCurObj(event);" id="mainCon"
style="width:700px;float:right;"> <span id="mainInner"
style="width:700px;"> <a
href="#" target="leftFrame">文章</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" target="leftFrame">博客</a> ┆<a
href="#" class="width4word" target="leftFrame">abd</a>
</div>
</td>
</tr>
</table>
</body>
</html>