`

js+css内容分页2

    博客分类:
  • CSS
阅读更多

<%@ 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对应

分享到:
评论

相关推荐

    div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格

    div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格 百分比表格(用DIV+CSS)以百分比显示,可以根据窗口的大小自动调节所显示的大小! DIV+CSS+JS静态分页程序可兼容主流浏览器(IE、FF、Opera) DIV+CSS表格...

    原生js + css实现分页

    本项目是利用原生JavaScript(JS)和层叠样式表(CSS)来实现这种功能,无需依赖任何外部库或框架。下面将详细探讨如何使用这两种技术来创建一个功能完备的分页组件。 首先,我们要理解分页的基本结构。通常,分页...

    jquery js+php+html5+css3分页栏生成及数据取出代码

    《js分页栏生成及数据取出》 使用方法说明 使用jquery php html5 css3来编写的js分页代码,方便大家进行稍加修改之后应用与自己的web页面或者站点。 如果需要观看demo可以查看: http://sunshine.ztime.net 一个...

    html5+javascript+css商城(模拟联想)购物系统

    另外,JavaScript 可以实现商品的动态加载和分页显示,提供更流畅的浏览体验。 三、CSS:视觉设计的艺术 CSS(层叠样式表)用于控制网页的布局和样式。在这个项目中,CSS3 的引入使得页面设计更加丰富多彩,包括...

    JS分页控件+CSS样式

    本文将详细介绍JavaScript(JS)实现的分页控件及其与CSS样式的结合应用。 一、JS分页控件的基本原理 JS分页控件主要是通过JavaScript来动态生成分页按钮,并处理用户点击分页按钮时的事件,以实现页面内容的切换。...

    23div+css.rar_DIV_css_css div_div+css_分页

    2. **样式**:通过CSS定义分页链接的颜色、大小、字体、边框、背景色等,以符合网站的整体设计风格。 3. **交互性**:使用CSS伪类(如`:hover`, `:active`, `:focus`)为鼠标悬停、点击和聚焦状态添加动态效果。 4. ...

    div+css制作非常实用的24款分页页码css代码

    本篇内容将详细探讨如何利用div+css制作实用且美观的分页页码。 首先,我们需要理解分页的基本结构。通常,一个分页组件包括上一页、下一页按钮以及一系列数字链接,表示当前所在的页码和可以跳转的其他页码。这些...

    html+jquery+css分页插件的简单实现

    2. **jQuery**:jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理和Ajax交互。在分页插件中,我们可以利用jQuery选择器来定位HTML元素,然后通过`.click()`事件监听用户的点击行为,执行相应的分页逻辑。 ...

    个人博客html+css+JavaScript完整代码

    4. **加载更多内容**:分页加载文章,减少页面加载时间。 5. **动态加载和隐藏内容**:如评论系统,可以按需加载和显示评论。 6. **响应式设计辅助**:通过检测窗口大小变化,调整布局或内容。 7. **时间戳动态更新*...

    html+js+php+mysql实现分页

    在网页开发中,分页是一种常见的功能,用于处理大量数据的显示,避免一次性加载过多内容导致页面卡顿或用户浏览不便。本示例通过HTML、JavaScript、PHP和MySQL四者结合,实现了一个简单的分页系统,非常适合初学者...

    html+css+javascript实现列表循环滚动示例代码

    说明:设置时间定时,在规定的时间内替换前一个节点的内容 1、关键代码:javascript: 复制代码代码如下: [removed] var dome=document.getElementById(“dome”); //获取节点 var dome1=document.getElementById...

    精选多款DIV+CSS分页样式源码

    3. **CSS分页样式**:分页样式通常包括分页按钮的大小、形状、颜色、边距、背景、 hover效果、active状态样式等。利用CSS,我们可以定制分页按钮的样式,使其与网站的整体设计风格保持一致。 4. **纯CSS翻页代码**...

    JS分页控件+CSS

    这里提到的"JS分页控件+CSS"是一个针对网页分页功能的解决方案,结合了JavaScript(JS)和层叠样式表(CSS)的技术。下面我们将深入探讨这两个关键组成部分以及它们如何协同工作。 **JS分页控件** JavaScript是一...

    100套css3分页效果

    在网页设计中,分页是一种常见的用户界面元素,用于处理大量数据或内容的展示,使得用户可以方便地浏览和导航。随着技术的发展,CSS3(层叠样式表第三版)为网页设计师提供了更多创新和动态的分页效果。本文将详细...

    非常酷的拖动分页(JS+CSS)

    一个非常酷的拖动分页(JS+CSS)。可以说是完全兼容主流浏览器,效果很强大...

    100套大数据模板 (html+css+js)

    JavaScript(JS)是实现页面动态效果和交互的关键。在大数据模板中,JavaScript被用来处理数据加载、图表绘制、用户交互等任务。例如,它可能会使用各种库如D3.js或ECharts来创建交互式图表,或者实现数据更新时的...

    php+mysql+ajax分页+table+loading效果+css(已测试成功)

    本资料无任何框架,有mysql...文件包含ajaxpg.php,ajax.js,page.css,loading.gif,table.sql; 动态数据显示在table里,有loading效果,page有css样式,可自定义样式,内有注释,大家稍稍修改可添加在个人网页系统中!!

    JS+CSS Menu

    "JS+CSS Menu"是一个结合了JavaScript(JS)和层叠样式表(CSS)技术的菜单解决方案,旨在创建交互式、动态且具有吸引力的网页菜单。这种菜单设计方法充分利用了两种语言的优势,提供更丰富的用户体验。 JavaScript...

    利用JS+CSS实现滚动表格数据展示

    下面将详细介绍如何通过JavaScript(JS)和层叠样式表(CSS)来实现这一功能。 首先,我们需要创建一个基本的HTML结构,包含一个`&lt;table&gt;`元素,用于展示数据。表格通常由`&lt;thead&gt;`(表头)、`&lt;tbody&gt;`(表格主体)...

    前端分页css与js

    本资源提供的`pagination.css`和`pagination.js`是实现前端分页的两个关键文件,分别用于样式控制和逻辑处理。 **CSS在前端分页中的作用** `pagination.css`文件主要负责分页组件的样式设计。在前端,CSS(层叠...

Global site tag (gtag.js) - Google Analytics