Ⅰ 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;
}
}