首頁 > web前端 > html教學 > js div 内容显示分页_html/css_WEB-ITnose

js div 内容显示分页_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:51:55
原創
1159 人瀏覽過

由于工作需要 

  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的显示高度 和内容高度  获得到一共多少页      显示的第几页也就是 从多少像素开始显示而已

 

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板