ホームページ >ウェブフロントエンド >htmlチュートリアル >js div コンテンツの表示 pagination_html/css_WEB-ITnose
js div コンテンツの表示 pagination_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:51:551154ブラウズ
仕事の都合により
divは固定サイズですが中身は可変なので内容が多すぎると自然に表示されなくなるのでページングなどの機能が必要です
以下がコードです。
<!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=gb2312" /><title>根据div高度判断分页的代码</title></head><body><div id="frameContent" style="width:605px;height:400px"> 内容 内容 很多很多内容 </div> <div id="pages" style="font-size:12px; width:605px; line-height:40px; text-align:center;"> 分页 页数</div><script language="javascript">var obj = document.getElementById("frameContent"); //获取内容层var pages = document.getElementById("pages"); //获取翻页层var pgindex=1; //当前页window.onload = function() //重写窗体加载的事件{var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj. offsetHeight));//获取页面数量 pages.innerHTML = "<b>共"+allpages+"页</b> "; //输出页面数量for (var i=1;i<=allpages;i++){ pages.innerHTML += "<a href=\"javascript:showPage('"+i+"');\">第"+i+"页</a> ";//循环输出第几页 } pages.innerHTML += " <a href=\"javascript:gotopage('-1');\">上一页</a> <a href=\"javascript:gotopage('1');\">下一页</a>"}function gotopage(value){try{ value=="-1"?showPage(pgindex-1):showPage(pgindex+1); }catch(e){ }}function showPage(pageINdex){ obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight); //根据高度，输出指定的页 pgindex=pageINdex;}</script></body></html> 実際には div の表示高さとコンテンツ高さを計算しています 合計何ページが表示されるかというと、ちょうど何ピクセルから表示されるのかです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。