導航:首頁 > 萬維百科 > 網頁設計翻頁

網頁設計翻頁

發布時間:2020-08-12 03:17:33

1、網頁設計,求自動滾動到下一頁的代碼

類似微博,新浪新聞的評論等,都採用了這方法。
關鍵代碼:
var stop=true;
$(window).scroll(function(){
totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
if($(document).height() <= totalheight){
if(stop==true){
stop=false;
$.post("ajax.php", {start:1, n:50},function(txt){
$("#Loading").before(txt);
stop=true;
},"text");
}
}
});
HTML:

<div id="Loading">Loading...</div>
實現方法是比較頁面總高度和下滾高度以判斷是否到達底端,若到達底端則通過ajax讀取更多的內容,用before插入到Loading之前。
stop參數是考慮到ajax讀取耗時,防止在一次ajax讀取過程中多次觸發事件,造成多次載入內容。
下面為你推薦 10 個 jQuery 的無限滾動的插件:
1. jQuery ScrollPagination
jQuery ScrollPagination plugin 是一個 jQuery 實現的支持無限滾動載入數據的插件。
2. jQuery Screw
Screw (scroll + view) 是一個 jQuery 插件當用戶滾動頁面的時候載入內容,是一個無限滾動翻頁的插件。
3. AutoBrowse jQuery Plugin
Autobrowse jQuery Plugin 插件在用戶滾動頁面的時候自動通過 Ajax 載入更多內容,使用瀏覽器內置緩存。
4. Scroll Extend Plugin
scrollExtend 插件用來在頁面滾動到屏幕底部時自動載入內容並追加 DOM 元素到頁面底部,該插件其最初目的是為了跟 WordPress 集成。
5. Infinite Scroll
用了這個插件,用戶訪問你的網站就不用翻頁啦!實際上它是預讀了後續頁的內容並將其直接添加到了當前頁面。
6. Load Content While Scrolling With jQuery
該插件可幫助非常快速的載入頁面的更多內容
7. Triggered Infinite Scroll
Triggered Infinite Scroll 是一個 Twitter 風格的自定義觸發器,不過它不是自動的。
8. Infinite Ajax Scroll, a jQuery Plugin
Infinite Ajax Scroll 可將你現有的網頁變成支持無限滾動的頁面,無需太麻煩就可搞定。
9. Infinite Scrolling jQuery Plugin
InfiniScroll 原先是一個 jQuery 插件,用於博客的文章列表顯示,不過現在已經不止這些了。
10. Unlimited Scroll using the Twitter API
可以試試這段代碼的,看看能否解決您的問題!

2、網頁製作 帶有翻頁的網頁怎麼編輯

這個比較復雜!!!
用javascript實現的
我這有個實例不知道是不是你要的那種

你要的話給郵箱。代碼挺多的。

3、網頁中的圖片翻頁怎麼設計

給我你的郵箱,我把素材文件和代碼給你發過去(帶教程)。

4、關於網頁設計問題(頁面翻頁方式)

你只的是先隱藏大部分只顯示出主要內容。而後在需要的情況下點擊下拉箭頭或是類似於「更多」這種。在同一個頁面顯示出更多的內容是吧。 事實上我不太曉得你用的是什麼語言編寫的網頁。推薦使用JAVA。這樣,下半部分做在另一個頁面。而原始頁面只需要使用表格嵌套就OK了

5、網頁製作怎麼翻頁

ASP裡面有一個專門的控制項,就是做翻頁的

6、網頁製作中如何實現滑鼠滑動翻頁

點一下滑鼠中間的輪,滑動即可實現,謝謝!

7、如何在網頁表格設計中製作圖片翻頁特效?

http://www.knowsky.com/tools/ad/ 這個裡面都 是JS代碼,應該有你要的那種效果 ,我做網頁的時候經常用這上面的JS代碼,你說的那個效果有好幾種,你可以好好看一下~!用的時候稍加發動就可以了 追問: 請你說具體些好嗎? 回答: 給你舉了個例子,想把代碼 發到上面你自己試可是提示字數太多了!我分兩部分發給你,然後你把這個放到新建的網頁<body></body>裡面看下就明白了~! 補充: 還是字數太多,發不出去,我也不知道怎麼說你能明白,你可以去我給你網址裡面下載一個代碼下來在DW裡面看看就明白了,第46個代碼大概是你說的那種效果吧?下面這是<table>裡面的內容,剩下的就是一個js圖片路徑等的設置,你把裡面的JS部分放到<body>後面我發的這部分內容的前面看下效果就知道了<table border="0" cellpadding="1" cellspacing="6" bgcolor="#E8E8E8"> <tr> <td bgcolor="#FFFFFF"><a onMouseOver="displayStatusMsg();return document.returnValue" href="javascript:jump2url()"><img src="search_banner.gif" name=bannerADrotator width=150 height=120 border=0 align="middle" style="FILTER: revealTrans(ration=2,transition=40)"></a> <script language=JavaScript>nextAd()</script></td> </tr> </table>

8、網頁設計中如何實現分頁的效果

用GridView空間,裡面有自帶的分頁功能,將屬性設置為true,然後在相應的事件裡面寫資料庫的查詢代碼就可以了!
一、動態網頁:這里有一段PHP代碼,供參考,我這邊運行成功:

1.顯示內容部分
<?php
$page=$_GET["page"];
if($page=="")
{$page=1;}
if(is_numeric($page))
{
$page_size=30;
$query="select count(*) as total from solution order by id desc";
$result = mysql_db_query($dbn, $query);
$message_count=mysql_result($result,0,"total");
$page_count=ceil($message_count/$page_size);
$offset=($page-1)*$page_size;
$sql=mysql_db_query($dbn,"select * from solution order by id desc limit $offset,$page_size");
$row=mysql_fetch_object($sql);
if(!$row)
{
echo("No data!");
}
?>
<?php
do
{
?>
</p>
<p>+ <a href="<?php echo $row->pageurl; ?>.html" title="<?php echo $row->pagetitle; ?>"><?php echo $row->pagetitle; ?></a></p>
<?php
}while($row=mysql_fetch_object($sql));
?>
<?php
}
?>

2.分頁部分
<?php
if($page!=1)
{
echo "<a href=index.php?page=1>First</a> ";
echo "<a href=index.php?page=".($page-1).">Previous</a> ";
}
if($page<$page_count)
{
echo "<a href=index.php?page=".($page+1).">Next</a> ";
echo "<a href=index.php?page=".$page_count.">End</a>";
}
?>
</span> <span> Current Page:<?php echo $page;?> / <?php echo $page_count;?></span>
<?php
mysql_free_result($sql);
?>

二、靜態網頁用js:
用JavaScript偽分頁,實際上內容還是在同一個頁面上。

<div id="page_1">第1頁內容</div>
<div id="page_2">第2頁內容</div>
<div id="page_3">第3頁內容</div>
<div id="page_4">第4頁內容</div>
<script type="text/javascript">//<![CDATA[
var curpage=document.hash.substr(1);
for (var i=1;i<=4;++i) {
document.getElementById('page_'+i).style.display=(i==curpage)?'':'none';
}
//]]></script>

然後用 page.htm#1 page.htm#2 page.htm#3 page.htm#4 來鏈接4頁。

與網頁設計翻頁相關的知識