Ⅰ html5上下滑动“翻页”实现，是真正的翻页
HTML5手机上下滑动翻页特效是一款手机移动端触屏滑动效果实现完整代码如下：
1、html5页面代码
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5手机页面触屏滑动上下翻页特效</title>
<meta charset="utf-8">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="pragram" content="no-cache">
<link rel="stylesheet" type="text/css" href="./hamer_files/main.css">
<link rel="stylesheet" type="text/css" href="./hamer_files/endpic.css">
<script type="text/javascript" src="./hamer_files/offline.js"></script>
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
</head>
<body class="s-bg-ddd pc no-3d perspective yes-3d" style="-webkit-user-select: none;">
<section class="u-alert">
<img style="display:none;" src="./hamer_files/loading_large.gif">
<div class="alert-loading z-move">
<div class="cycleWrap"> <span class="cycle cycle-1"></span>
<span class="cycle cycle-2"></span><span class="cycle cycle-3"></span><span class="cycle cycle-4"></span>
</div>
<div class="lineWrap"> <span class="line line-1"></span><span class="line line-2"></span><span class="line line-3"></span>
</div>
</div>
</section>
<section class="u-arrow">
<p class="css_sprite01"></p>
</section>
<section class="p-ct transformNode-2d transformNode-3d" style="height: 918px;">
<div class="translate-back" style="height: 918px;">
<div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height: 918px;">
<div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="height: 920px; background-image: url(hamer_files/1.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/2.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/3.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/4.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/5.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/6.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/7.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/8.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
</div>
</section>
<section class="u-pageLoading">
<img src="./hamer_files/load.gif" alt="loading">
</section>
<script src="./hamer_files/init.mix.js" type="text/javascript" charset="utf-8"></script>
<script src="./hamer_files/coffee.js" type="text/javascript" charset="utf-8"></script>
<script src="./hamer_files/99_main.js" type="text/javascript" charset="utf-8"></script>
</body></html>
2、css代码：
@charset "utf-8";
.ad_foot li { margin:0 auto 1em; font-size:1.8em; padding:15px; background:#FFF;}
.ad_foot li a {display:block;}
.ad_foot li .l {width:75px; height:75px; float:left; overflow:hidden;}
.ad_foot li .l img {width:75px; width:75px;}
.ad_foot li .r {width:78%; float:left; margin-left:30px; color:#666; overflow:hidden;}
.ad_foot li .r p {color:#999; font-size:1.2em; }
.ad_foot li .r span {font-size:0.8em;}
.ad_foot li .r i {font-style:normal;}
.lazy-img, .lazy-finish{background-color:#f0eded;}
.page-list{font-size:20px;font-family: "Microsoft yahei";padding-left:17px;padding-top:30px;height:35px;border-bottom:1px solid #b5b5b5;display:none;}
.ad_foot{padding:15px 15px 0 15px;}
/*声音播放按钮*/
#song_img {width:293px; height:41px; display:block; position:absolute; right:4.1em; top:1.6em; font-size:1.7em; text-align:center; line-height:41px; color:#FFF; background:url(../img/music_c3.png) no-repeat 0 0;}
/*底部推荐*/
.ad_list{margin-top:2em;}.ad_list li {width:46%; background:none; padding:0; float:left;margin-bottom: 1em;}
.ad_list li.r {float:right;}.ad_list li a img {width:100%; height:auto;}
.ad_foot h3 {width:100%; height:48px; line-height:48px; background:#F9F5EC;}
.ad_foot h3 a {display:inline-block; color:#444; width:50%; text-align:center; font-size:1.5em; height:48px; border-bottom:2px solid #FF9240;}
.ad_foot h3 a.active {color:#FFF; background:#FF9240;}
.magazine_1 li {
width:100%;
margin-bottom: 1em;
font-size: 1.8em;
padding: 15px;
background: #FFF;}
.magazine_1 li a {display:block;}
.magazine_1 li .l {width: 75px;
height: 75px;
float: left;
overflow: hidden;}
.magazine_1 li .l img {width:75px; height:75px;}
.magazine_1 li .r {width: 78%;
float: left;
margin-left: 30px;
color: #666;
overflow: hidden;}
.magazine_1 li .r p {
color: #999;
font-size: 1.2em;
.magazine_1 li .r span {font-size:0.8em;}
.ad_foot li .r i {font-style:normal;}
Ⅱ 用html和css做了个换页的效果 但是怎么也实现
直接用个A标签
链接到另外一个页面
设置为在本窗口打开
这样就完成你要换页的效果了
Ⅲ 想用JAVA WEB 实现分页技术。请问应该怎么做
实现原理很简单，就是建立一个Page类，里面放当前访问的页数（这个是从客户浏览器传到后台的数据，所以你的分页需要用它来定位记录的条目）和每一页显示的记录行数。然后通过分页计算就可以得出下列数据。
(假定你的页数从1开始)
1、总页数 = 总记录数/每页大小,如果0!=总记录数%每页大小，那么总页数再+1
2、当前页数(从浏览器传递的参数中获得)
3、表记录的起始位置=(当前页数-1)*每页大小
4、总记录数（select count(*) from [表名] [where [条件]]，从数据库中查询得到)
5、每页大小，可以固定，也可以从页面传过来
有了这几个参数之后，就用sql语句查出对应的记录就可以了。
mysql数据库用limit 表记录的起始位置,每页大小 语句添加到你的查询语句最后面
sqlserver数据库用top语句和not in 来做
oracle数据库用rownum来做
再给你一段分页对象代码，你自己先读一下
public class Page {
private long totalCount = 0;// 总记录数
private int pageNumber = 1;// 当前页号，默认显示第一页
private int pageSize = 20; // 每页大小，默认每页20条
private int totalPage = 0;// 总页数，默认为0
private int startRow = 0;// 起始记录行号，默认为从表头开始
/**
* 分页计算方法，由setTotalCount调用
*/
public void pagination() {
// 计算总页数
if (this.totalCount % pageSize == 0)
this.totalPage = new Long(this.totalCount / pageSize).intValue();
else
this.totalPage = new Long(this.totalCount / pageSize).intValue() + 1;
// 排除错误页号
if (this.pageNumber < 1)
this.pageNumber = 1;
if (this.pageNumber > this.totalPage)
this.pageNumber = this.totalPage;
// 计算起始行号
this.startRow = (this.pageNumber - 1) * this.pageSize;
}
public long getTotalCount() {
return totalCount;
}
public void setTotalCount(long totalCount) {
this.totalCount = totalCount;
this.pagination();
}
public int getPageNumber() {
return pageNumber;
}
public void setPageNumber(int pageNumber) {
this.pageNumber = pageNumber;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getStartRow() {
return startRow;
}
public void setStartRow(int startRow) {
this.startRow = startRow;
}
}
Ⅳ 怎么实现网页中的文本内容换页
你是指文章太长了要自动分页吧
估计只能能截取字符串了 前台后台控制都内可以
如果是纯文本的话容 要么规定一页多少个字符 然后截取
要么在文本中要翻页的地方加入标记 然后截取
反正最终都是截取字符串了 如果不是纯文本 那就困难一点
在网络搜索 文章分页代码
前台控制可以使用js纯文本文章分页 仅供参考
Ⅳ 制作网页时怎么实现框架的换页
看教程的第三章
第11节
教程内地容址
http://tech.163.com/special/w/000915SQ/webmediatech.html
Ⅵ 如何在网页中实现图片自动换页的效果
R/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片自动跳转</title>
<script language="javascript">
setInterval(test,1000);
var array=new Array();
var index=0;
var array= new Array("image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg","image/5.jpg","image/6.jpg","image/7.jpg","image/8.jpg","image/9.jpg","image/10.jpg");
function test()
{ var myimg=document.getElementById("imgs");
if(index==array.length-1)
{ index=0; }else{ index++; }
myimg.src=array[index];
}
</script>
</head>
<body >
<img id="imgs" src="image/1.jpg" /> </body>
Ⅶ 怎样在HTML用代码实现内容换页
最常见的分页的代码是 :ASP PHP JSP
如果你的静态页面要分页 有一个 方法---JS
HTML上的分页JS代码
<form onsubmit="window.location=this.aaa.options[this.aaa.selectedIndex].value; return false;">
<select name="select" onchange="javascript:window.location.href=this.options[this.selectedIndex].value">
<SCRIPT type=text/javascript>
for(var pN=1;pN<184;pN++)
document.write("<option value='Page_"+pN+".html'>第"+pN+"页</option>");
</SCRIPT>
</select></td></form>
加一个page=8的参数?
然后在for那里再用条件判断??
<form onsubmit="window.location=this.ep8.options[this.ep8.selectedIndex].value; return false;">
<select name="select" onchange="javascript:window.location.href=this.options[this.selectedIndex].value">
<script type="text/javascript">
p=8;
for(var i=1;i<9;i++)
if (i==p){
document.write("<option value='Page_"+p+".html' selected>第"+p+"页</option>");
}
else {
document.write("<option value='Page_"+i+".html'>第"+i+"页</option>");
}
</script>
</select></form>
Ⅷ 网页中的“下一页”怎么实现
网页中的“下一页”实现的方法。
如下参考：
1.首先，打开HTML编辑器并创建一个新回的HTML文件，如index.html。
Ⅸ 如何利用C#的WebBrowser进行网页的翻页
直接根复据InnerText属性找到“制下一页”元素，然后再模拟点击；
//引用mshtml;
IHTMLDocument2 doc = WB1.Document.DomDocument as IHTMLDocument2;
foreach (IHTMLElement ele in doc2.all)
{
if (ele.innerText == "下一页>")
{
bl_exist = true;
ele.click();
break;
}
}