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页。