js+css内容分页2

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@ include file="left.jsp" %>

<p id="area"><span>歡迎加入我們!</span></p>

<img class="title" src="img/title_team.gif" alt="" />
<dl id="team_detail">
<dt>
<img src="upload/${teamUI.pic_myself}" />
<span><a href="">online洽談合作</a></span>
<span><a href="findTeamUITeamAction.action?artist_id=${teamUI.artist_id}">作者作品list</a></span>
</dt>
<dd>
<div id="frameContent">
你要写的内容
</div>
</dd>
</dl>
<form action="" id="teamlist" >
<p id="next">
<a href="getTeamListUITeamAction.action">all art</a> |
</p>
</form>


<%@ include file="link.jsp"%>

<SCRIPT language=javascript>
var obj = document.getElementById("frameContent"); //获取内容层
var pages = document.getElementById("next"); //获取翻页层
var pgindex=1; //当前页
var lastPage = 0 ;
window.onload = function() //重写窗体加载的事件
{
	//alert("obj.scrollHeight="+obj.scrollHeight);
	var allpages = parseInt(obj.scrollHeight)%220 == 0?parseInt(obj.scrollHeight)/220 :Math.ceil(parseInt(obj.scrollHeight)/220);
 	//var allpages = Math.ceil(parseInt(obj.scrollHeight)/220);//获取页面数量
	lastPage = allpages ;
	pages.innerHTML += " <a href=\"javascript:showPage(1);\">first</a> | " 
	pages.innerHTML += " <a href=\"javascript:gotopage('-1');\">previous</a> | <a href=\"javascript:gotopage('1');\">next </a> | "
	pages.innerHTML += " <a href=\"javascript:showPage("+ lastPage +");\">last</a> | " 
	pages.innerHTML += " <a href=\"javascript:showPage(document.getElementById('getnum').value)\">fast</a> <input id='getnum' value='' type='text' size='1' />page | "
	pages.innerHTML += " no.<span id='now1' value='1' >1p</span> |  all."+lastPage+"p |  " ;
}
function gotopage(value){
	try{
		value=="-1"?showPage(pgindex-1):showPage(pgindex+1);
	}catch(e){
	}
}
function showPage(pageINdex)
{	
	if( pageINdex <= 1 ){
		pageINdex = 1 ;
	}else if( pageINdex >= lastPage ){
		pageINdex = lastPage ;
	}
 	obj.style.top = -( (pageINdex-1)*(220+20))+"px"//parseInt(obj.offsetHeight ); //指定top高度,让页面在上一层div中,上下移动。
	pgindex = pageINdex;
	document.getElementById('now1').innerHTML = pgindex+'p' ;
}
</SCRIPT>
#team_detail dd{ 
  width:530px;
  line-height:20px;
  height:220px; 
  word-break:break-all; 
  overflow:hidden; 
  position:relative;
}

 数据中的220 要与 最后css中的height属性的220px对应

你可能感兴趣的:(JavaScript,html,sql,jsp,css)