Heim > Web-Frontend > HTML-Tutorial > js div 内容显示分页_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:51:55
Original
1175 Leute haben es durchsucht

由于工作需要 

  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>    
Nach dem Login kopieren

  其实 就是 在计算 div的显示高度 和内容高度  获得到一共多少页      显示的第几页也就是 从多少像素开始显示而已

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage