以下是 jQuery分页动画效果代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<title>jQuery分页动画效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- font awesome -->
<link href="css/font-awesome.css" rel="stylesheet" />
<!-- css -->
<link rel="stylesheet" href="css/styles.css" />
<link href="img/common/favicon.png" rel="shortcut icon" />
<!--[if lt IE 8]>
<link rel="stylesheet" href="css/styles.ie7.css" />
<![endif]-->
<link rel="stylesheet" href="css/vendor/github.min.css" />
<link href="css/jpage.css" rel="stylesheet" type="text/css" />
<!-- js -->
<script src="js/vendor/jquery-1.10.0.min.js"></script>
<!--script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.2.js"></script-->
<!--[if gt IE 8]> -->
<script src="js/vendor/highlight.min.js"></script>
<script>
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
</script>
<!-- <![endif]-->
<!-- jpage -->
<script src="js/jpage.min.js"></script>
<script>
$('document').ready(function(){
$('#jpage').jpage({
effect: 'random' //'', 'crossfade', 'bricks', 'slideLeft', 'slideRight', 'random'
});
});
</script>
</head>
<body>
<br>
<!-- main content -->
<div id="main-content" class="box">
<div class="center">
<div id="page-content" class="box">
<!-- jPage DEMO -->
<div id="jpage" class="jpage box">
<!-- pagination panel -->
<div class="box jpage-panel" data-type="panel"></div>
<div class="list box text-shadow" data-type="content">
<!-- item 1 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/arch-2.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">01/16/2013</p>
<p class="title">Architecture</p>
<p class="desc">Architecture is both the
process and product of planning, designing
and construction. Architectural works, in
the material form of buildings, are often
perceived as cultural symbols and as works
of art. Historical civilizations are often
identified with their surviving
architectural achievements.</p>
<p class="like">25 Likes</p>
</div>
</div>
<!-- item 2 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/autumn-1.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">01/31/2013</p>
<p class="title">Autumn</p>
<p class="desc">Autumn or Fall is one of the
four temperate seasons. Autumn marks the
transition from summer into winter, in
September (Northern Hemisphere) or March
(Southern Hemisphere) when the arrival of
night becomes noticeably earlier. The
equinoxes might be expected to be in the
middle of their respective seasons, but
temperature lag (caused by the thermal
latency of the ground and sea) means that
seasons appear later than dates calculated
from a purely astronomical perspective.</p>
<p class="like">12 Likes</p>
</div>
</div>
<!-- item 3 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/boats-1.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">02/24/2000</p>
<p class="title">Boats</p>
<p class="desc">A boat is a watercraft of
any size designed to float or plane, to
provide passage across water. Usually this
water will be inland (lakes) or in protected
coastal areas. However, boats such as the
whaleboat were designed to be operated from
a ship in an offshore environment. In naval
terms, a boat is a vessel small enough to be
carried aboard another vessel (a ship).</p>
<p class="like">11 Likes</p>
</div>
</div>
<!-- item 4 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/arch-1.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">03/15/2012</p>
<p class="title">Arch</p>
<p class="desc">An arch is a structure that
spans a space and supports a load. Arches
appeared as early as the 2nd millennium BC
in Mesopotamian brick architecture and their
systematic use started with the Ancient
Romans who were the first to apply the
technique to a wide range of structures.</p>
<p class="like">5 Likes</p>
</div>
</div>
<!-- item 5 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/book-1.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">11/22/2001</p>
<p class="title">Books</p>
<p class="desc">A book is a set of written,
printed, illustrated, or blank sheets, made
of ink, paper, parchment, or other
materials, usually fastened together to
hinge at one side. A single sheet within a
book is called a leaf, and each side of a
leaf is called a page. A book produced in
electronic format is known as an electronic
book (e-book).</p>
<p class="like">100 Likes</p>
</div>
</div>
<!-- item 6 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/business-1.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">02/05/2004</p>
<p class="title">Business</p>
<p class="desc">A business (also known as
enterprise or firm) is an organization
engaged in the trade of goods, services, or
both to consumers. Businesses are
predominant in capitalist economies, where
most of them are privately owned and
administered to earn profit to increase the
wealth of their owners. Businesses may also
be not-for-profit or state-owned. A business
owned by multiple individuals may be
referred to as a company, although that term
also has a more precise meaning.</p>
<p class="like">15 Likes</p>
</div>
</div>
<!-- item 7 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/calendar-1.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">05/08/2003</p>
<p class="title">Calendar</p>
<p class="desc">A calendar is a system of
organizing days for social, religious,
commercial, or administrative purposes. This
is done by giving names to periods of time,
typically days, weeks, months, and years.
The name given to each day is known as a
date. Periods in a calendar (such as years
and months) are usually, though not
necessarily, synchronized with the cycle of
the sun or the moon.</p>
<p class="like">18 Likes</p>
</div>
</div>
<!-- item 8 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/car-1.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">09/01/2007</p>
<p class="title">Car</p>
<p class="desc">An automobile, autocar,
motor car or car is a wheeled motor vehicle
used for transporting passengers, which also
carries its own engine or motor. Most
definitions of the term specify that
automobiles are designed to run primarily on
roads, to have seating for one to eight
people, to typically have four wheels, and
to be constructed principally for the
transport of people rather than goods.</p>
<p class="like">7 Likes</p>
</div>
</div>
<!-- item 9 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/christmas-1.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">11/12/1998</p>
<p class="title">Christmas</p>
<p class="desc">Christmas or Christmas Day
is an annual commemoration of the birth of
Jesus Christ, celebrated generally on
December as a religious and cultural holiday
by billions of people around the world. A
feast central to the Christian liturgical
year, it closes the Advent season and
initiates the twelve days of Christmastide.
Christmas is a civil holiday in many of the
world"s nations, is celebrated by an
increasing number of non-Christians, and is
an integral part of the Christmas and
holiday season.</p>
<p class="like">29 Likes</p>
</div>
</div>
<!-- item 10 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/christmas-2.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">06/10/1995</p>
<p class="title">The Christmas Toy</p>
<p class="desc">The Christmas Toy is a 1986
made-for-TV movie by The Jim Henson Company.
It originally aired on ABC on December 6,
1986, and was originally sponsored by Kraft
Foods. Originally introduced by Kermit The
Frog, it was released on VHS format in 1993.
In 2008, HIT Entertainment (distributed by
Lionsgate) released the special on DVD, but
edited out Kermit"s appearance due to legal
issues.</p>
<p class="like">35 Likes</p>
</div>
</div>
<!-- item 11 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/christmas-3.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">04/04/2006</p>
<p class="title">Christmas Tree</p>
<p class="desc">A Christmas tree is a
decorated tree, usually an evergreen conifer
such as pine or fir, traditionally
associated with the celebration of
Christmas. An artificial Christmas tree is
an object made to resemble such a tree,
usually made from polyvinyl chloride.</p>
<p class="like">86 Likes</p>
</div>
</div>
<!-- item 12 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/city-1.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">06/19/1981</p>
<p class="title">City</p>
<p class="desc">A city is a relatively large
and permanent settlement. Although there is
no agreement on how a city is distinguished
from a town within general English language
meanings, many cities have a particular
administrative, legal, or historical status
based on local law.</p>
<p class="like">125 Likes</p>
</div>
</div>
<!-- item 13 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/city-2.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">08/25/1991</p>
<p class="title">Capital City</p>
<p class="desc">A capital city (or just,
capital) is the area of a country, province,
region, or state considered to enjoy primary
status; although there are exceptions, a
capital is typically a city that physically
encompasses the offices and meeting places
of the seat of government and is usually
fixed by law or by the constitution. An
alternative term is political capital, but
this phrase has a second meaning based on an
alternate sense of the word capital. The
capital is often, but not necessarily, the
largest city of its constituent area.</p>
<p class="like">191 Likes</p>
</div>
</div>
<!-- item 14 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/coffee-grass.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">02/02/2002</p>
<p class="title">Coffee</p>
<p class="desc">Coffee is a brewed beverage
with a bitter, acidic flavor prepared from
the roasted seeds of the coffee plant. The
beans are found in coffee cherries, which
grow on trees cultivated in over 70
countries, primarily in equatorial Latin
America, Southeast Asia, South Asia and
Africa. Green (unroasted) coffee is one of
the most traded agricultural commodities in
the world. Coffee can have a stimulating
effect on humans due to its caffeine
content. It is one of the most-consumed
beverages in the world.</p>
<p class="like">18 Likes</p>
</div>
</div>
<!-- item 15 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/coins.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">03/17/1999</p>
<p class="title">Coins</p>
<p class="desc">A coin is a piece of hard
material that is standardized in weight, is
produced in large quantities in order to
facilitate trade, and primarily can be used
as a legal tender. Coins are usually metal
or a metallic material and sometimes made of
synthetic materials, usually in the shape of
a disc, and most often issued by a
government. Coins are used as a form of
money in transactions of various kinds, from
the everyday circulation coins to the
storage of large numbers of bullion coins.
In the present day, coins and banknotes make
up currency, the cash forms of all modern
money systems.</p>
<p class="like">39 Likes</p>
</div>
</div>
<!-- item 16 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/crayons.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">03/08/1990</p>
<p class="title">Crayons</p>
<p class="desc">A crayon is a stick of
colored wax, charcoal, chalk, or other
materials used for writing, coloring,
drawing, and other methods of illustration.
A crayon made of oiled chalk is called an
oil pastel; when made of pigment with a dry
binder, it is simply a pastel; both are
popular media for color artwork. A grease
pencil or china marker (UK chinagraph
pencil) is made of colored hardened grease
and is useful for marking on hard, glossy
surfaces such as porcelain or glass. Some
fine arts companies such as Swiss Caran
d"Ache manufacture water-soluble crayons,
whose colors are easily mixed once applied
to media.</p>
<p class="like">14 Likes</p>
</div>
</div>
<!-- item 17 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/cupcakes.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">05/25/1965</p>
<p class="title">Cupcakes</p>
<p class="desc">A cupcake (also British
English: fairy cake; Australian English:
patty cake or cup cake) is a small cake
designed to serve one person, frequently
baked in a small, thin paper or aluminum
cup. As with larger cakes, frosting and
other cake decorations, such as sprinkles,
are common on cupcakes. Although their
origin is unknown, recipes for cupcakes have
been printed since at least the late 12th
century.</p>
<p class="like">128 Likes</p>
</div>
</div>
<!-- item 18 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/eggs-nest.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">12/31/1986</p>
<p class="title">Nests</p>
<p class="desc">A nest is a place of refuge
to hold an animal"s eggs or provide a place
to live or raise offspring. They are usually
made of some organic material such as twigs,
grass, and leaves; or may simply be a
depression in the ground, or a hole in a
tree, rock or building. Human-made
materials, such as string, plastic, cloth,
hair or paper, may be used.</p>
<p class="like">66 Likes</p>
</div>
</div>
<!-- item 19 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/flower-1.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">03/19/2012</p>
<p class="title">Flower</p>
<p class="desc">A flower, sometimes known as
a bloom or blossom, is the reproductive
structure found in flowering plants (plants
of the division Magnoliophyta, also called
angiosperms). The biological function of a
flower is to effect reproduction, usually by
providing a mechanism for the union of sperm
with eggs. Flowers may facilitate
outcrossing (fusion of sperm and eggs from
different individuals in a population) or
allow selfing (fusion of sperm and egg from
the same flower).</p>
<p class="like">85 Likes</p>
</div>
</div>
<!-- item 20 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/flower-2.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">01/11/2013</p>
<p class="title">Pseudanthium</p>
<p class="desc">A pseudanthium (Greek for
"false flower") or flower head is a special
type of inflorescence, in which several
flowers are grouped together to form a
flower-like structure. The real flowers are
generally small and greatly reduced, but can
sometimes be quite large (as in the
sunflower flower head). Pseudanthia take
various forms. The individual flowers of a
pseudanthium can be called florets.</p>
<p class="like">22 Likes</p>
</div>
</div>
<!-- item 21 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/flower-3.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">06/06/1993</p>
<p class="title">Flowering Plant</p>
<p class="desc">The flowering plants
(angiosperms), also known as Angiospermae or
Magnoliophyta, are the most diverse group of
land plants. Angiosperms are seed-producing
plants like the gymnosperms and can be
distinguished from the gymnosperms by a
series of synapomorphies (derived
characteristics). These characteristics
include flowers, endosperm within the seeds,
and the production of fruits that contain
the seeds.</p>
<p class="like">90 Likes</p>
</div>
</div>
<!-- item 22 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/fountain.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">06/10/1995</p>
<p class="title">Fountains</p>
<p class="desc">A fountain (from the Latin
"fons" or "fontis", a source or spring) is a
piece of architecture which pours water into
a basin or jets it into the air either to
supply drinking water or for decorative or
dramatic effect. Fountains were originally
purely functional, connected to springs or
aqueducts and used to provide drinking water
and water for bathing and washing to the
residents of cities, towns and villages.
Until the late 19th century most fountains
operated by gravity, and needed a source of
water higher than the fountain, such as a
reservoir or aqueduct, to make the water
flow or jet into the air.</p>
<p class="like">40 Likes</p>
</div>
</div>
<!-- item 23 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/leaves.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">04/12/1990</p>
<p class="title">Leaves</p>
<p class="desc">A leaf is an organ of a
vascular plant, as defined in botanical
terms, and in particular in plant
morphology. Foliage is a mass noun that
refers to leaves as a feature of plants.
Typically a leaf is a thin, flattened organ
borne above ground and specialized or
photosynthesis, but many types of leaves are
adapted in ways almost unrecognisable in
those terms: some are not flat (for example
many succulent leaves and conifers), some
are not above ground (such as bulb scales),
and some are without major photosynthetic
function (consider for example cataphylls,
spines, and cotyledons).</p>
<p class="like">42 Likes</p>
</div>
</div>
<!-- item 24 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/lichterman.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">11/04/2001</p>
<p class="title">Landscapes</p>
<p class="desc">Landscape comprises the
visible features of an area of land,
including the physical elements of landforms
such as (ice-capped) mountains, hills, water
bodies such as rivers, lakes, ponds and the
sea, living elements of land cover including
indigenous vegetation, human elements
including different forms of land use,
buildings and structures, and transitory
elements such as lighting and weather
conditions.</p>
<p class="like">14 Likes</p>
</div>
</div>
<!-- item 25 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/pinecone.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">08/19/2006</p>
<p class="title">Conifer Cone</p>
<p class="desc">A cone (in formal botanical
usage: strobilus, plural strobili) is an
organ on plants in the division Pinophyta
(conifers) that contains the reproductive
structures. The familiar woody cone is the
female cone, which produces seeds. The male
cones, which produce pollen, are usually
herbaceous and much less conspicuous even at
full maturity. The name "cone" derives from
the fact that the shape in some species
resembles a geometric cone. The individual
plates of a cone are known as scales.</p>
<p class="like">321 Likes</p>
</div>
</div>
<!-- item 26 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/river-1.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">07/24/1995</p>
<p class="title">Rivers</p>
<p class="desc">A river is a natural
watercourse, usually freshwater, flowing
towards an ocean, a lake, a sea, or another
river. In a few cases, a river simply flows
into the ground or dries up completely
before reaching another body of water. Small
rivers may also be called by several other
names, including stream, creek, brook,
rivulet, tributary and rill. There are no
official definitions for generic terms, such
as river, as applied to geographic features,
although in some countries or communities a
stream may be defined by its size. Many
names for small rivers are specific to
geographic location; one example is "burn"
in Scotland and northeast England. Sometimes
a river is said to be larger than a creek,
but this is not always the case, because of
vagueness in the language.</p>
<p class="like">88 Likes</p>
</div>
</div>
<!-- item 27 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/river-2.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">03/03/1953</p>
<p class="title">River Source</p>
<p class="desc">The source or headwaters of
a river or stream is the furthest place in
that river or stream from its estuary or
confluence with another river, as measured
along the course of the river.</p>
<p class="like">62 Likes</p>
</div>
</div>
<!-- item 28 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/sunset-1.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">07/17/2009</p>
<p class="title">Sunset</p>
<p class="desc">Sunset or sundown is the
daily disappearance of the Sun below the
horizon in the west as a result of Earth"s
rotation. The time of sunset is defined in
astronomy as the moment when the trailing
edge of the Sun"s disk disappears below the
horizon in the west. The ray path of light
from the setting Sun is highly distorted
near the horizon because of atmospheric
refraction, making the sunset appear to
occur when the Sun"s disk is already about
one diameter below the horizon. Sunset is
distinct from dusk, which is the moment at
which darkness falls, which occurs when the
Sun is approximately eighteen degrees below
the horizon. The period between sunset and
dusk is called twilight.</p>
<p class="like">25 Likes</p>
</div>
</div>
<!-- item 29 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/tree.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">02/20/2008</p>
<p class="title">Tree</p>
<p class="desc">A tree is a perennial woody
plant. It is most often defined as a woody
plant that has many secondary branches
supported clear of the ground on a single
main stem or trunk with clear apical
dominance. A minimum height specification at
maturity is cited by some authors, varying
from 3 m to 6 m; some authors set a minimum
of 10 cm trunk diameter (30 cm girth). Woody
plants that do not meet these definitions by
having multiple stems and/or small size are
usually called shrubs, although many trees
such as Mallee do not meet such definitions.
Compared with most other plants, trees are
long-lived, some reaching several thousand
years old and growing to up to 115 m (379
ft) high.</p>
<p class="like">57 Likes</p>
</div>
</div>
<!-- item 30 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/winter-1.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">07/26/2012</p>
<p class="title">Winter</p>
<p class="desc">Winter is the coldest season
of the year in temperate climates, between
autumn and spring. At the winter solstice,
the days are shortest and the nights are
longest, with days lengthening as the season
progresses after the solstice.</p>
<p class="like">79 Likes</p>
</div>
</div>
<!-- item 31 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/winter-2.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">07/18/1995</p>
<p class="title">Seesaw</p>
<p class="desc">A see saw (also known as a
teeter-totter or teeter board) is a long,
narrow board pivoted in the middle so that,
as one end goes up, the other goes down.
Mechanically a seesaw is a lever and
fulcrum. Seesaws also work as a simple
example of a mechanical system with two
equilibrium positions. One side is stable,
while the other is unstable.</p>
<p class="like">32 Likes</p>
</div>
</div>
<!-- item 32 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/winter-sun.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">02/15/2005</p>
<p class="title">Winter Sun</p>
<p class="desc">The Sun is the star at the
center of the Solar System. It is almost
perfectly spherical and consists of hot
plasma interwoven with magnetic fields. It
has a diameter of about 1,392,000 km, about
109 times that of Earth, and its mass
accounts for about 99.86% of the total mass
of the Solar System. Chemically, about three
quarters of the Sun"s mass consists of
hydrogen, while the rest is mostly helium.
The remainder (1.69%, which nonetheless
equals 5,628 times the mass of Earth)
consists of heavier elements, including
oxygen, carbon, neon and iron, among others.</p>
<p class="like">81 Likes</p>
</div>
</div>
<!-- item 33 -->
<div class="list-item box">
<!-- img -->
<div class="img left">
<img src="img/thumbs/woodstump.jpg" alt="" title=""/>
</div>
<!-- data -->
<div class="block right">
<p class="date">11/12/2004</p>
<p class="title">Wood</p>
<p class="desc">Wood is a hard, fibrous
tissue found in many trees. It has been used
for hundreds of thousands of years for both
fuel and as a construction material. It is
an organic material, a natural composite of
cellulose fibers (which are strong in
tension) embedded in a matrix of lignin
which resists compression. Wood is produced
as secondary xylem in the stems of trees
(and other woody plants). In a living tree
it performs a support function, enabling
woody plants to grow large or to stand up
for themselves. It also mediates the
transfer of water and nutrients to the
leaves and other growing tissues. Wood may
also refer to other plant materials with
comparable properties, and to material
engineered from wood, or wood chips or
fiber.</p>
<p class="like">25 Likes</p>
</div>
</div>
</div>
</div>
<!-- end of jPage DEMO -->
</div>
</div>
</div>
</body>
</html>
JS代码(jpage.min.js):
/* jQuery jPage Plugin 1.0.425 Copyright 2013 Miriam Zusin. All rights reserved. To use this file you must to buy a licence at http://codecanyon.net/user/no81no/portfolio*/
(function(e){
var b=function(a){
a.$root.on(a.options.pageClickedEvent,function(c,b){
var d;
if(0===a.timeline.progress&&(!a.panel.paging||a.panel.paging&&a.panel.paging.currentPage!==b))a.$root.trigger(a.options.drawPagingEvent,[b,a.options.itemsPerPage,a.$items.length]),d=new e.fn.jpage.Pagination(b,a.options.itemsPerPage,a.$items.length,a.options.pagesRange),d=a.$items.slice(d.firstItemIndexOnPage,d.lastItemIndexOnPage),e.fn.jpage.animation.drawItems(a.options,a.$dataRoot,a.$items,d,a.$dataview,a.options.effect,a.timeline),a.$dataview=d}
)}
,d=function(a,c){
c.each(function(){
var c=$(this),b;
b=new e.fn.jpage.Dataitem(a.options,c);
c.data("jpage.item",b)}
)}
,c=function(a,c){
var f={
options:a,$root:c,$dataRoot:null,panel:null,timeline:null,$items:null,$dataview:null}
;
f.options=$.extend(!0,{
itemPath:".list-item",itemsPerPage:5,firstPage:0,firstPageText:"<
<
",lastPageText:">
>
",prevPageText:"<
",nextPageText:">
",effect:"",duration:600,fps:24,pageClickedEvent:"pageClickedEvent",drawPagingEvent:"drawPagingEvent",animationStartEvent:"animationStartEvent",animationStepEvent:"animationStepEvent",animationCompleteEvent:"animationCompleteEvent"}
,a);
f.$dataRoot=f.$root.find('[data-type="content"]');
0<f.$dataRoot.length&&f.options.itemPath&&(f.$items=f.$dataRoot.find(f.options.itemPath),d(f,f.$items),f.panel=new e.fn.jpage.Panel(f.$root,f.options),f.timeline=new e.fn.jpage.animation.Timeline(f.$dataRoot,f.options),e.fn.jpage.animation.initStyles(f.$dataRoot,f.$items),f.$items.detach(),b(f),f.$root.trigger(f.options.pageClickedEvent,[f.options.firstPage]));
return e.extend(this,f)}
;
e.fn.jpage=function(a){
return this.each(function(){
var b=new c(a,$(this));
$(this).data("jpage",b);
return b}
)}
}
)(jQuery);
(function(e){
jQuery.fn.jpage.animation={
}
;
jQuery.fn.jpage.animation.initStyles=function(b,d){
var c,a;
d.each(function(){
c=e(this);
(a=c.data("jpage.item"))&&a.$element.css({
width:a.widthPBM,height:a.heightPB,marginBottom:a.marginBottom}
)}
);
b.addClass("jpage-relative");
d.addClass("jpage-abs")}
;
jQuery.fn.jpage.animation.before=function(b,d,c,a){
var g,f=0;
a&&a.css({
opacity:1,left:0}
);
for(var e=0;
e<c.length;
e++)if(b=c.eq(e),g=b.data("jpage.item"))b.css({
top:f,opacity:0,left:0}
),f+=g.heightPB+g.marginBottom;
d.height(Math.max(d.height(),f));
d.append(a);
d.append(c)}
;
jQuery.fn.jpage.animation.after=function(b,d,c,a){
a&&a.detach();
d.off(b.animationStepEvent);
d.off(b.animationCompleteEvent)}
;
jQuery.fn.jpage.animation.getRandomEffect=function(){
var b=["crossfade","bricks","slideLeft","slideRight"],d;
d=Math.floor(Math.random()*b.length);
return b[d]}
;
jQuery.fn.jpage.animation.drawItems=function(b,d,c,a,g,f,m){
var h,k,l;
f||(f="noEffect");
"random"===f&&(f=jQuery.fn.jpage.animation.getRandomEffect());
if(c=jQuery.fn.jpage.animation[f]){
h=c.before;
l=c.effect;
k=c.after;
e.isFunction(h)?h(b,d,a,g):jQuery.fn.jpage.animation.before(b,d,a,g);
if(e.isFunction(l))d.on(b.animationStepEvent,function(c,f,e){
l(b,d,a,g,f)}
);
d.on(b.animationCompleteEvent,function(c){
e.isFunction(k)?k(b,d,a,g):jQuery.fn.jpage.animation.after(b,d,a,g)}
);
"noEffect"===f?m.play(0):m.play(b.duration)}
}
}
)(jQuery);
(function(e){
jQuery.fn.jpage.animation.noEffect={
}
;
jQuery.fn.jpage.animation.noEffect.before=function(b,d,c,a){
var g;
b=0;
a&&0<a.length&&a.detach();
for(var f=0;
f<c.length;
f++)a=c.eq(f),g=a.data("jpage.item"),a.css({
top:b}
),b+=g.heightPBM;
d.height(Math.max(d.height(),b));
d.append(c)}
}
)(jQuery);
(function(e){
jQuery.fn.jpage.animation.crossfade={
}
;
jQuery.fn.jpage.animation.crossfade.effect=function(b,d,c,a,g){
a&&a.css({
opacity:(100-g)/100}
);
c.css({
opacity:g/100}
)}
}
)(jQuery);
(function(e){
jQuery.fn.jpage.animation.bricks={
cssSupported:!0}
;
jQuery.fn.jpage.animation.bricks.effect=function(b,d,c,a,g){
c.css({
opacity:g/100}
);
if(a)for(d=0;
d<a.length;
d++)b=a.eq(d),0===d%2?b.css({
opacity:(100-g)/100,left:-g+"%"}
):b.css({
opacity:(100-g)/100,left:g+"%"}
)}
}
)(jQuery);
(function(e){
jQuery.fn.jpage.animation.slideLeft={
}
;
jQuery.fn.jpage.animation.slideLeft.effect=function(b,d,c,a,g){
c.css({
opacity:g/100}
);
a&&a.css({
opacity:(100-g)/100,left:-g+"%"}
)}
}
)(jQuery);
(function(e){
jQuery.fn.jpage.animation.slideRight={
cssSupported:!0}
;
jQuery.fn.jpage.animation.slideRight.effect=function(b,d,c,a,g){
c.css({
opacity:g/100}
);
a&&a.css({
opacity:(100-g)/100,left:g+"%"}
)}
}
)(jQuery);
(function(e){
var b=function(a){
a.handler&&window.clearTimeout(a.handler);
a.progress=0;
a.start=null;
a.$scene.trigger(a.options.animationCompleteEvent,[])}
,d=function(a,c){
c&&0<c&&(a.handler=window.setTimeout(function(){
var f;
null===a.start&&(a.$scene.trigger(a.options.animationStartEvent,[]),a.start=(new Date).getTime());
f=(new Date).getTime()-a.start;
a.progress=f/c;
1<=a.progress&&(a.progress=1);
a.$scene.trigger(a.options.animationStepEvent,[100*a.progress,a]);
1>a.progress?d(a,c):b(a)}
,a.delay))}
,c=function(a,c){
var b={
$scene:a,options:c,start:null,progress:0,delay:null,handler:null}
;
b.delay=1E3/b.options.fps;
return $.extend(this,b)}
;
c.prototype.play=function(a){
d(this,a)}
;
c.prototype.stop=function(){
b(this)}
;
e.fn.jpage.animation.Timeline=function(a,b){
var d=new c(a,b);
this.$scene=d.$scene;
this.options=d.options;
this.start=d.start;
this.progress=d.progress;
this.delay=d.delay;
this.play=d.play;
this.stop=d.stop}
}
)(jQuery);
(function(e){
var b=function(b,c){
var a={
options:b,$element:c,offset:c.offset(),position:c.position(),width:c.width(),height:c.height(),widthPB:c.outerWidth(),heightPB:c.outerHeight(),widthPBM:c.outerWidth(!0),heightPBM:c.outerHeight(!0),marginBottom:0}
;
a.marginBottom=a.heightPBM-a.heightPB;
c.data("jpage.dataitem",a);
return jQuery.extend(this,a)}
;
jQuery.fn.jpage.Dataitem=function(d,c){
var a=new b(d,c);
this.options=a.options;
this.$element=a.$element;
this.offset=a.offset;
this.position=a.position;
this.width=a.width;
this.height=a.height;
this.widthPB=a.widthPB;
this.heightPB=a.heightPB;
this.widthPBM=a.widthPBM;
this.heightPBM=a.heightPBM;
this.marginBottom=a.marginBottom}
}
)(jQuery);
(function(e){
jQuery.fn.jpage.Pagination=function(b,d,c,a){
this.currentPage=e.isNumeric(b)?b:0;
this.allItemsNumber=e.isNumeric(c)?c:0;
this.itemsNumberPerPage=e.isNumeric(d)?d:this.allItemsNumber;
this.pagesRange=e.isNumeric(a)?a:10;
this.pagesNumber=0<this.itemsNumberPerPage?Math.ceil(this.allItemsNumber/this.itemsNumberPerPage):0;
this.currentPage>this.pagesNumber-1&&(this.currentPage=0);
this.firstItemIndexOnPage=this.currentPage*this.itemsNumberPerPage;
b=this.allItemsNumber;
d=this.firstItemIndexOnPage+this.itemsNumberPerPage;
d>b&&(d=b);
this.lastItemIndexOnPage=d;
b=this.currentPage;
this.prevPage=0>=b?0:b-1;
b=this.currentPage;
d=this.pagesNumber;
this.nextPage=0===d?0:b>=d-1?d-1:b+1;
b=this.currentPage;
d=this.pagesRange;
c=this.pagesNumber;
var g;
2>d?b={
leftStart:b,leftEnd:b,rightStart:b,rightEnd:b}
:(a=Math.floor(d/2),0>b-a&&Math.max(0,a=b-1),g=d-1-a,b+g>c-1&&(g=Math.max(0,c-b-1),a=Math.max(0,d-1-g)),b={
leftStart:b-a,leftEnd:Math.max(0,b-1),rightStart:Math.max(0,Math.min(b+1,c-1)),rightEnd:Math.max(0,Math.min(b+g,c-1))}
);
this.dynamicRange=b;
a=this.currentPage;
c=this.pagesRange;
b=this.pagesNumber;
2>c?c=d=a:(a=Math.floor(a/c),d=c*a,c=c*(a+1)-1,0>d&&(d=0),c>b-1&&(c=b-1),0>c&&(c=0));
this.staticRange={
start:d,end:c}
}
}
)(jQuery);
(function(e){
jQuery.fn.jpage.helper={
}
;
jQuery.fn.jpage.helper.getjQueryItems=function(b){
return e(b).map(function(b,c){
return c.$element.get()}
)}
}
)(jQuery);
(function(e){
var b=function(c){
c.$root.on("click","[data-page]",function(a){
a=Number(e(this).attr("data-page"));
isNaN(a)&&(a=0);
c.$root.trigger(c.options.pageClickedEvent,[a])}
);
c.$root.on(c.options.drawPagingEvent,function(a,b,d,e){
if(0<c.$panel.length&&!isNaN(b)&&!isNaN(d)&&!isNaN(e)){
a=new jQuery.fn.jpage.Pagination(b,d,e,c.options.pagesRange);
e="";
c.paging=a;
b='<ul class="jpage-pagination">';
0<a.currentPage&&(b+='<li data-page="0">'+c.options.firstPageText+"</li>");
0<a.currentPage&&(b+='<li data-page="'+(a.currentPage-1)+'">'+c.options.prevPageText+"</li>");
for(var h=0;
h<a.pagesNumber;
h++)e=a.currentPage===h?' class="active"':"",d=h+1,b+='<li data-page="'+h+'"'+e+">"+d+"</li>";
a.currentPage<a.pagesNumber-1&&(b+='<li data-page="'+(a.currentPage+1)+'">'+c.options.nextPageText+"</li>");
a.currentPage<a.pagesNumber-1&&(b+='<li data-page="'+(a.pagesNumber-1)+'">'+c.options.lastPageText+"</li>");
c.$panel.html(b+"</ul>")}
}
)}
,d=function(b,a){
var d={
$root:b,options:a,$panel:b.find('[data-type="panel"]'),paging:null}
;
return jQuery.extend(this,d)}
;
jQuery.fn.jpage.Panel=function(c,a){
var e;
e=new d(c,a);
b(e);
return e}
}
)(jQuery);
CSS代码(jpage.css):
body{overflow-x:hidden;}
/*** common styles*/
.jpage-relative{position:relative;}
.jpage-abs{position:absolute;}
.jpage-panel{margin-bottom:15px;}
/*** content styles*/
.block{width:840px;}
.title{font-size:16px;color:#f03800;}
.date{float:right;color:#440e00;}
.like{color:#440e00;}
/*** list styles*/
.list{/*background:#fff;overflow:hidden;*/
}
.list .list-item{border:1px solid #E3E3E3;border-radius:5px;margin-bottom:15px;background:#fff;box-sizing:border-box;-moz-box-sizing:border-box;}
.list .img{width:15%;float:left;font-size:0;text-align:center;}
.list .img img{max-width:90%;}
.list .block{float:right;width:85%;}
.list .block p{margin:0;padding:0 15px 5px 0;}
.list-item{padding-top:15px;}
/*** pagination*/
.jpage-pagination{list-style:none;padding:0;margin:0;}
.jpage-pagination li{float:left;background:#fff;border:1px solid #E3E3E3;border-radius:2px;padding:0 10px;margin-right:5px;color:#0381BB;cursor:pointer;}
.jpage-pagination li:hover{background:#E2E2E2;border:1px solid #aaa;outline:1px solid #fff;font-weight:bold;}
.jpage-pagination .active,.jpage-pagination .active:hover{border:1px solid #FCB6A1;color:#F03800;background:#fff;}
CSS代码(styles.ie7.css):
/*** IE7 styles*/
#page-content .default-menu{padding-bottom:20px;}
.h1-30-normal{padding-bottom:30px;}
code{overflow:auto;}
.arrows-menu{padding-top:10px;}
分享到QQ
分享到微博
微信扫一扫
