Qr's blog--[原创]非常简单实用的 javascript + CSS 静态分页

[原创]非常简单实用的 javascript + CSS 静态分页

2009/5/13 22:54:22

在某网站看到一 javascript + CSS 静态分页示例，是通过 javascript 代码“拖动”滚动条来模拟分页，觉得比较复杂。于是就自己写了下面的非常简单实用的 javascript + CSS 静态分页。 ------------------------------Author: Qr,http://Qr.blogger.org.cnDate: 2009-05-13------------------------------ 样式：-------------------------------------------------body { font-size:13px;font-weight:bold;color:white;text-align:center;}#wrapper{ overflow:hidden;margin:150px auto 0 auto;width:400px;height:auto; background:#eef;border:1px solid #990;}#container{ overflow:hidden;height:200px;/*#container.height<=#wrapper.height,不要定义padding&margin*/}A { margin:0 10px;padding:0;color:#f00;text-decoration: none;}A:hover { background:#ddd;}dd A { margin:0;padding:0;display:block;height:20px;line-height:20px; color:#800;text-decoration: none;}dd A:hover { background:#dde;} 脚本：-------------------------------------------------function $(o) { return document.getElementById(o);} function pageInit(){ var _lineHeight = 20;//行高 var _pagecount = Math.ceil(document.getElementsByTagName("dd").length * _lineHeight / $("container").clientHeight); var _pencel = ""; for(var i=0;i<_pagecount;i++)_pencel += '<a href="javascript :pageing('+(i+1)+');">' + (i+1) + '</a>'; $("pencel").innerHTML=_pencel;}function pageing(pages){ document.getElementById("dl").style.marginTop = "-" + $("container").clientHeight*(pages-1) + "px";} window.onload = function(){ pageInit();} HTML：-------------------------------------------------<div id="wrapper"> <div id="container"> <dl id="dl"><dt></dt> <dd><a href="javascript :void(0)">1</a></dd> <dd><a href="javascript :void(0)">2</a></dd> <dd><a href="javascript :void(0)">3</a></dd> .... <dd><a href="javascript :void(0)">30</a></dd> </dl> </div></div><div id="pencel"></div> wellcome: http://Qr.blogger.org.cnQr.

Posted by Qr on 2009/5/13 22:54:22