模拟分页效果 - 动态内容 - 软晨网（RuanChen.com）

当前位置: 首页 > 实例教程 > 脚本特效 > 动态内容 > 模拟分页效果

动态内容: 文字/图片自动播放脚本; 顶置浮动内容条; 内容前后翻页; 内容折叠效果; 可滚动内容; 固定中间渐变提示效果; 垂片切换内容; 垂片图片内容切换; 模拟分页效果; 自动隐藏的广告框效果

实例搜索

关键字

动态内容中的模拟分页效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-07-27 浏览: 494 ::

收藏到网摘: n/a

垂片图片内容切换自动隐藏的广告框效果

模拟分页效果 - 软晨网（RuanChen.com）

效果

Demo 1:

Prev Next

Demo 2:

RSS Display Boxes Credits: Dynamic Drive
Tme to get your RSS on! Using Ajax, this script makes it easy to display RSS feeds from other sites inside DIV containers, by communicating with a versatile PHP RSS parser called "Simplepie". Each RSS box can be independently tailored, from the RSS feed to fetch, how many items to show (and whether to paginate them), to what portions of each entry (just the "title", or "title" plus "description" etc) to display.

Interstitial Content Box Credits: Dynamic Drive
An interstitial is a container that appears over an entire webpage intermittingly to display content in an eye catching way. This is a Interstitial Box script that uses Ajax to fetch and display the contents of external pages on your server as an interstitial.

Omni Slide Menu Credits: John Scheuer
Omni Slide Menu is an super versatile slideout menu that reacts to the mouse hovering over and out of it. It can be positioned to the left, top, or right edge of the browser window, supports static positioning, plus multiple instances of the same menu on a page and more. Very cool.

Custom Cursor Script II (Crosshair mouse cursor) Credits: Webtoolkit.info
This script adds a custom cursor to your webpage using an interchangeable image. The result is a custom mouse cursor that can be modified in anyway your graphic skills take you. Elegant and non intrusive effect!

Drop Down Tab Menu Credits: Dynamic Drive
This is a lean CSS tab menu that supports a 2nd level drop down menu for any of its tabs. It supports subtle yet helpful features such as the ability to set a default selected tab, hide any element on the page (ie: a form field) when the menu drops down etc.

Featured Content Slider Credits: Dynamic Drive
Featured Content Slider makes a slideshow out of arbitrary content on your page, so users can manually select a content to see or have them rotated automatically. Pagination links let the user quickly pick a content to show. Each content is simply normal HTML wrapped in DIV tags for effortless integration.

F Prev Next L

Demo 3:

Demo 4 (shows "flatview" pagination interface with custom text defined):

< >

Demo 5 (shows "SELECT" pagination interface with custom text defined):

Prev Next

第一步：将样式放在head标签中



<style type="text/css">
/*Sample CSS used for the Virtual Pagination Demos. Modify/ remove as desired*/
.virtualpage, .virtualpage2, .virtualpage3{
/*hide the broken up pieces of contents until script is called. Remove if desired*/
display: none;
}
.paginationstyle{ /*Style for demo pagination divs*/
width: 250px;
text-align: center;
padding: 2px 0;
margin: 10px 0;
}
.paginationstyle select{ /*Style for demo pagination divs' select menu*/
border: 1px solid navy;
margin: 0 15px;
}
.paginationstyle a{ /*Pagination links style*/
padding: 0 5px;
text-decoration: none;
border: 1px solid black;
color: navy;
background-color: white;
}
.paginationstyle a:hover, .paginationstyle a.selected{
color: #000;
background-color: #FEE496;
}
.paginationstyle a.imglinks{ /*Pagination Image links style (class="imglinks") */
border: 0;
padding: 0;
}
.paginationstyle a.imglinks img{
vertical-align: bottom;
border: 0;
}
.paginationstyle a.imglinks a:hover{
background: none;
}
.paginationstyle .flatview a:hover, .paginationstyle .flatview a.selected{ /*Pagination div "flatview" links style*/
color: #000;
background-color: yellow;
}
</style>

第二步：下载JS文件，并导入到html文档中

/example/files/b/virtualpaginate.js

第三步：在BODY里放入显示的代码，我们提供了5种不同的演示代码



<h3>Demo 1:</h3>
<div style="width: 300px; height: 230px;">
<div class="virtualpage">
<img src="http://img184.imageshack.us/img184/1159/castleyi6.gif" />
</div>
<div class="virtualpage">
<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" />
</div>
<div class="virtualpage">
<img src="http://img201.imageshack.us/img201/8538/weedjh8.gif" />
</div>
<div class="virtualpage">
<img src="http://img201.imageshack.us/img201/6923/countryxb6.gif" />
</div>
</div>
<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>
<script type="text/javascript">
var gallery=new virtualpaginate("virtualpage", 1)
gallery.buildpagination("gallerypaginate")
</script>
<h3>Demo 2:</h3>
<div style="width: 450px; height: 200px; border: 1px dashed gray; padding: 10px; background-color: #EEFFAA">
<p class="virtualpage2">
<b><a href="#">RSS Display Boxes</a></b> <span class="credits">Credits: Dynamic Drive</span><br>
Tme to get your RSS on! Using Ajax, this script makes it easy to display RSS feeds from other sites inside DIV containers, by communicating with a versatile PHP RSS parser called "Simplepie". Each RSS box can be independently tailored, from the RSS feed to fetch, how many items to show (and whether to paginate them), to what portions of each entry (just the "title", or "title" plus "description" etc) to display.
</p>
<p class="virtualpage2">
<b><a href="#">Interstitial Content Box</a></b> <span class="credits">Credits: Dynamic Drive</span><br>
An interstitial is a container that appears over an entire webpage intermittingly to display content in an eye catching way. This is a Interstitial Box script that uses <b>Ajax</b> to fetch and display the contents of external pages on your server as an interstitial.
</p>
<p class="virtualpage2">
<b><a href="#">Omni Slide Menu</a></b> <span class="credits">Credits: John Scheuer</span><br>
Omni Slide Menu is an super versatile slideout menu that reacts to the mouse hovering over and out of it. It can be positioned to the left, top, or right edge of the browser window, supports static positioning, plus multiple instances of the same menu on a page and more. Very cool.
</p>
<p class="virtualpage2">
<b><a href="#">Custom Cursor Script II (Crosshair mouse cursor)</a></b> <span class="credits">Credits: Webtoolkit.info</span><br>
This script adds a custom cursor to your webpage using an interchangeable image. The result is a custom mouse cursor that can be modified in anyway your graphic skills take you. Elegant and non intrusive effect!
</p>
<p class="virtualpage2">
<b><a href="#">Drop Down Tab Menu</a></b> <span class="credits">Credits: Dynamic Drive</span><br>
This is a lean CSS tab menu that supports a 2nd level drop down menu for any of its tabs. It supports subtle yet helpful features such as the ability to set a default selected tab, hide any element on the page (ie: a form field) when the menu drops down etc.
</p>
<p class="virtualpage2">
<b><a href="#">Featured Content Slider</a></b> <span class="credits">Credits: Dynamic Drive</span><br>
Featured Content Slider makes a slideshow out of arbitrary content on your page, so users can manually select a content to see or have them rotated automatically. Pagination links let the user quickly pick a content to show. Each content is simply normal HTML wrapped in DIV tags for effortless integration.
</p>
</div>
<div id="scriptspaginate" class="paginationstyle" style="width: 400px">
<a href="#" rel="first">F</a> <a href="#" rel="previous">Prev</a> <span class="paginateinfo" style="margin: 0 30px; font-weight: bold"></span> <a href="#" rel="next">Next</a> <a href="#" rel="last">L</a>
</div>
<script type="text/javascript">
var newscripts=new virtualpaginate("virtualpage2", 1, "p") //Let script know you're using "p" tags as separator (instead of default "div")
newscripts.buildpagination("scriptspaginate")
</script>
<h3>Demo 3:</h3>
<div id="listingpaginate" class="paginationstyle">
<a href="#" rel="previous" class="imglinks"><img src="http://img293.imageshack.us/img293/8643/roundleftig4.gif" /></a> <select></select> <a href="#" rel="next" class="imglinks"><img src="http://img183.imageshack.us/img183/3816/roundrightat5.gif" /></a>
</div>
<div style="width: 450px; border: 1px dashed gray; padding: 10px;">
<p class="virtualpage3">
<b><a href="#">RSS Display Boxes</a></b> <span class="credits">Credits: Dynamic Drive</span><br>
Tme to get your RSS on! Using Ajax, this script makes it easy to display RSS feeds from other sites inside DIV containers, by communicating with a versatile PHP RSS parser called "Simplepie". Each RSS box can be independently tailored, from the RSS feed to fetch, how many items to show (and whether to paginate them), to what portions of each entry (just the "title", or "title" plus "description" etc) to display.
</p>
<p class="virtualpage3">
<b><a href="#">Interstitial Content Box</a></b> <span class="credits">Credits: Dynamic Drive</span><br>
An interstitial is a container that appears over an entire webpage intermittingly to display content in an eye catching way. This is a Interstitial Box script that uses <b>Ajax</b> to fetch and display the contents of external pages on your server as an interstitial.
</p>
<p class="virtualpage3">
<b><a href="#">Omni Slide Menu</a></b> <span class="credits">Credits: John Scheuer</span><br>
Omni Slide Menu is an super versatile slideout menu that reacts to the mouse hovering over and out of it. It can be positioned to the left, top, or right edge of the browser window, supports static positioning, plus multiple instances of the same menu on a page and more. Very cool.
</p>
<p class="virtualpage3">
<b><a href="#">Custom Cursor Script II (Crosshair mouse cursor)</a></b> <span class="credits">Credits: Webtoolkit.info</span><br>
This script adds a custom cursor to your webpage using an interchangeable image. The result is a custom mouse cursor that can be modified in anyway your graphic skills take you. Elegant and non intrusive effect!
</p>
<p class="virtualpage3">
<b><a href="#">Drop Down Tab Menu</a></b> <span class="credits">Credits: Dynamic Drive</span><br>
This is a lean CSS tab menu that supports a 2nd level drop down menu for any of its tabs. It supports subtle yet helpful features such as the ability to set a default selected tab, hide any element on the page (ie: a form field) when the menu drops down etc.
</p>
<p class="virtualpage3">
<b><a href="#">Featured Content Slider</a></b> <span class="credits">Credits: Dynamic Drive</span><br>
Featured Content Slider makes a slideshow out of arbitrary content on your page, so users can manually select a content to see or have them rotated automatically. Pagination links let the user quickly pick a content to show. Each content is simply normal HTML wrapped in DIV tags for effortless integration.
</p>
</div>
<script type="text/javascript">
var whatsnew=new virtualpaginate("virtualpage3", 2, "p") //Let script know you're using "p" tags as separator (instead of default "div")
whatsnew.buildpagination("listingpaginate")
</script>
<hr style="margin-top: 35px; color: red" />
<h3>Demo 4 (shows "flatview" pagination interface with custom text defined):</h3>
<div style="width: 300px; height: 230px;">
<div class="virtualpage4">
<img src="http://img184.imageshack.us/img184/1159/castleyi6.gif" />
</div>
<div class="virtualpage4">
<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" />
</div>
<div class="virtualpage4">
<img src="http://img201.imageshack.us/img201/8538/weedjh8.gif" />
</div>
<div class="virtualpage4">
<img src="http://img201.imageshack.us/img201/6923/countryxb6.gif" />
</div>
</div>
<div id="galleryalt" class="paginationstyle" style="width: 300px; text-align: left">
<a href="#" rel="previous"><</a> <span class="flatview"></span> <a href="#" rel="next">></a>
</div>
<script type="text/javascript">
var gallery=new virtualpaginate("virtualpage4", 1)
gallery.buildpagination("galleryalt", ["castle", "park", "harvest", "country"])
</script>
<h3>Demo 5 (shows "SELECT" pagination interface with custom text defined):</h3>
<div style="width: 300px; height: 230px;">
<div class="virtualpage5">
<img src="http://img184.imageshack.us/img184/1159/castleyi6.gif" />
</div>
<div class="virtualpage5">
<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" />
</div>
<div class="virtualpage5">
<img src="http://img201.imageshack.us/img201/8538/weedjh8.gif" />
</div>
<div class="virtualpage5">
<img src="http://img201.imageshack.us/img201/6923/countryxb6.gif" />
</div>
</div>
<div id="galleryselect" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <select style="width: 120px"></select> <a href="#" rel="next">Next</a>
</div>
<script type="text/javascript">
var gallery=new virtualpaginate("virtualpage5", 1)
gallery.buildpagination("galleryselect", ["castle", "park", "harvest", "country"])
</script>