以下是 jquery左侧工具栏菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery左侧工具栏菜单</title>
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.custom.css" />
<link rel="stylesheet" type="text/css" href="css/bookblock.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<script src="js/modernizr.custom.79639.js"></script>
</head>
<body>
<div id="container" class="container">
<div class="menu-panel">
<h3>Table of Contents</h3>
<ul id="menu-toc" class="menu-toc">
<li class="menu-toc-current"><a href="#item1">Self-destruction</a></li>
<li><a href="#item2">Why we die</a></li>
<li><a href="#item3">The honeymoon</a></li>
<li><a href="#item4">A drawing joke</a></li>
<li><a href="#item5">Commencing practice</a></li>
</ul>
<div>
<a href="#/">← Previous Demo: Responsive Audio Player</a>
<a href="#">Back to the Codrops Article</a>
</div>
</div>
<div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item" id="item1">
<div class="content">
<div class="scroller">
<h2>Self-destruction</h2>
<p>The Hon. Francis Gillette, in a speech in Hartford, Conn., in 1871, said
that there was "in Connecticut, on an average, one liquor shop to every
forty voters, and three to every Christian church. In this city, as stated
in the _Hartford Times_, recently, we have five hundred liquor shops, and
one million eight hundred and twenty-five thousand dollars were, last
year, paid for intoxicating drinks. A cry, an appeal, came to me from the
city, a few days since, after this wise: 'Our young men are going to
destruction, and we want your influence, counsel, and prayers, to help
save them.'"</p>
<p>In New London, report says, the young men are falling into drinking habits
as never before. So in New Haven, Bridgeport, and the other cities and
large places of the state.</p>
<p>"The pulse of a person in health beats about seventy strokes a minute, and
the ordinary term of life is about seventy years. In these seventy years,
the pulse of a temperate person beats two billion five hundred and
seventy-four million four hundred and forty thousand times. If no actual
disorganization should happen, a drunken person might live until his pulse
beat this number of times; but by the constant stimulus of ardent spirits,
or by pulse-quickening food, or tobacco, the pulse becomes greatly
accelerated, and the two billion five hundred and seventy-four million
four hundred and forty thousand pulsations are performed in little more
than half the ordinary term of human life, and life goes out in forty or
forty-five years, instead of seventy. This application of numbers is given
to show that the acceleration of those forces diminishes the term of human
life."</p>
<p>"In New York, Mr. Greeley states that 'a much larger proportion of adult
males in the state drink now than did in 1840-44.' After speaking of the
adverse demonstrations all over the country, he adds, 'I cannot recall a
single decisive, cheering success, to offset these many reverses.'</p>
<p>"Massachusetts is moving to build an asylum for her twenty-five thousand
drunkards. Lager beer brewers at Boston Highlands have three millions of
dollars invested in the business, manufactured four hundred and
ninety-five thousand barrels last year, and paid a tax of half a million
to the general government. The city of Chicago, last year, received into
her treasury one hundred and ten thousand dollars for the sale of
indulgences to sell intoxicating drinks.</p>
<p>"The same rate of fearful expenditure for intoxicating drinks extends
across the ocean. In a speech before the Trades' Union Congress, last
October, at Birmingham, 'on the disorganization of labor,' Mr. Potter
shows drunkenness to be the great disorganizer of the labor of Great
Britain, at a yearly cost of two hundred and twenty-eight million pounds,
equal to one billion one hundred and forty million dollars; enough," he
adds, "to pay the public debt of Great Britain in less than five years,
and greatly diminish taxation forever."</p>
<p><em>From <a href="#" target="_blank">"The Funny Side of Physic"</a> by A. D. Crabtre</em></p>
</div>
</div>
</div>
<div class="bb-item" id="item2">
<div class="content">
<div class="scroller">
<h2>Why we die</h2>
<p>But few of the human race die of old age. Besides the thousand and one
diseases flesh is heir to, and the disease which Mrs. O'Flannagan said her
husband died of, viz., "Of a Saturday 'tis that poor Mike died," very many
die of disappointment. More _fret_ out. Mr. Beecher said, "It is the
fretting that wears out the machinery; friction, not the real wear."</p>
<p>"Choked with passion" is no chimera; for passion often kills the
unfortunate possessor of an irritable temper, sometimes suddenly. Care and
over-anxiety sweep away thousands annually.</p>
<p>Let us see how long a man should live. The horse lives twenty-five years;
the ox fifteen or twenty; the lion about twenty; the dog ten or twelve;
the rabbit eight; the guinea-pig six or seven years. These numbers all
bear a similar proportion to the time the animal takes to grow to its full
size. But man, of all animals, is the one that seldom comes up to his
average. He ought to live a hundred years, according to this physiological
law, for five times twenty are one hundred; but instead of that, he
scarcely reaches, on the average, four times his growing period; the cat
six times; and the rabbit even eight times the standard of measurement.
The reason is obvious. Man is not only the most irregular and the most
intemperate, but the most laborious and hard-worked of all animals. He is
also the most irritable of all animals; and there is reason to believe,
though we cannot tell what an animal secretly feels, that, more than any
other animal, man cherishes wrath to keep it warm, and consumes himself
with the fire of his secret reflections.</p>
<p>"Age dims the lustre of the eye, and pales the roses on beauty's cheek;
while crows' feet, and furrows, and wrinkles, and lost teeth, and gray
hairs, and bald head, and tottering limbs, and limping, most sadly mar the
human form divine. But dim as the eye is, pallid and sunken as may be the
face of beauty, and frail and feeble that once strong, erect, and manly
body, the immortal soul, just fledging its wings for its home in heaven,
may look out through those faded windows as beautiful as the dewdrop of
summer's morning, as melting as the tears that glisten in affection's eye,
by growing kindly, by cultivating sympathy with all human kind, by
cherishing forbearance towards the follies and foibles of our race, and
feeding, day by day, on that love to God and man which lifts us from the
brute, and makes us akin to angels."</p>
<p><em>From <a href="#" target="_blank">"The Funny Side of Physic"</a> by A. D. Crabtre</em></p>
</div>
</div>
</div>
<div class="bb-item" id="item3">
<div class="content">
<div class="scroller">
<h2>The honeymoon</h2>
<p>The origin of the honeymoon is not generally known.</p>
<p>The Saxons long and long ago got up the delightful occasion. Amongst the
ancient Saxons and Teutons a beverage was made of honey and water, and
sometimes flavored with mulberries. This drink was used especially at
weddings and the after festivals. These festivals were kept up among the
nobility sometimes for a month--"monath." The "hunig monath" was thus
established, and the next moon after the marriage was called the
honeymoon.</p>
<p>Alaric, about the fifth century king of the Saxons and Western Goths, is
said to have actually died on his wedding night from drinking too freely
of the honeyed beverage,--at least he died before morning,--and it
certainly would seem to be a charitable inference to draw, since he
partook very deeply of the "festive drink." It was certainly a sweet
oblivion, "yet it should be a warning to posterity, as showing that even
bridegrooms may make too merry."</p>
<p>Dr. Blanchet recently read a paper before the Academy of Science, Paris,
relative to some cases of "long sleep," or lethargic slumber. One of them
related to a lady twenty years of age, who took a sleeping fit during her
_honeymoon_, which lasted fifty days.</p>
<p>"During this long period a false front tooth had to be taken out in order
to introduce milk and broth into her mouth. This was her only food; she
remained motionless, insensible, and all her muscles were in a state of
contraction. Her pulse was low, her breathing scarcely perceptible; there
was no evacuation, no leanness; her complexion was florid and healthy.
The other cases were exactly similar. Dr. Blanchet is of opinion that in
such cases no stimulants or forced motion ought to be employed.</p>
<p>"The report did not say whether the husband was pleased or not with her
long silence."</p>
<p>There is too much talk in the world about woman's "_jaw_." As for me, give
me the woman who can _talk_; the faster and more sense the better.</p>
<p><em>From <a href="#" target="_blank">"The Funny Side of Physic"</a> by A. D. Crabtre</em></p>
</div>
</div>
</div>
<div class="bb-item" id="item4">
<div class="content">
<div class="scroller">
<h2>A drawing joke</h2>
<p>Several kings and great lords are made mention of as being particularly
fond of using the lancet. Peter the Great of Russia was remarkably fond of
witnessing dissections and surgical operations. He even used to carry a
case of instruments in his pocket. He often visited the hospitals to
witness capital operations, at times assisting in person, and was able to
dissect properly, to bleed a patient, and extract a tooth as well as one
of the faculty.</p>
<p>The pretty wife of one of the czar's valets had the following unpleasant
experience of his skill. The husband of the "maid" accused her of
flirting, and vowed revenge. The czar noticed the valet seated in the
ante-room, looking forlorn, and asked the cause of his dejection. The
wicked valet replied that his wife had a tooth which gave her great pain,
keeping them both awake day and night, but would not have it drawn.</p>
<p>"Send her to me," said the czar.</p>
<p>The woman was brought, but persisted in affirming that her teeth were
sound, and never ached. The valet alleged that this was always the way she
did when the physician was called; therefore, in spite of her cries and
remonstrances, the king ordered her husband to hold her head between his
knees, when the czar drew out his instruments and instantly extracted the
tooth designated by the husband, disregarding the cries of the unfortunate
victim.</p>
<p>In a few days the czar was informed that the thing was a put-up job by the
jealous husband, in order to punish, if not mar the beauty of, his gallant
wife, whereupon the instruments were again brought into requisition; and
this time the naughty valet was the sufferer, to the extent of losing a
sound and valuable tooth.</p>
<p><em>From <a href="#" target="_blank">"The Funny Side of Physic"</a> by A. D. Crabtre</em></p>
</div>
</div>
</div>
<div class="bb-item" id="item5">
<div class="content">
<div class="scroller">
<h2>Commencing practice</h2>
<p>From that excellent work, "Scenes in the Practice of a New York Surgeon,"
by Dr. E. H. Dixon, I copy, with some abbreviation, the following, which
the author terms "Leaves from the Log-book of an Unfledged 脝sculapian:"--</p>
<p>"In the year 1830 I was sent forth, like our long-suffering and
much-abused prototype,--old father Noah's crow,--from the ark of safety,
the old St. Duane Street College. I pitched my tent, and set up my trap,
in what was then a fashionable up-town street.</p>
<p>"I hired a modest house, and had my arm-chair, my midnight couch, and my
few books in my melancholy little office, and I confess that I now and
then left an amputating-knife, or some other awful-looking instrument, on
the table, to impress the poor women who came to me for advice.</p>
<p>"These little matters, although the 'Academy' would frown upon them, I
considered quite pardonable. God knows I would willingly have adopted
their most approved method of a splendid residence, and silver-mounted
harnesses for my bays; but they were yet in dream-land, eating moonbeams,
and my vicious little nag had nearly all this time to eat his oats and
nurse his bad temper in his comfortable stable.</p>
<p>"In this miserable way I read over my old books, watered my
rose-bushes,--sometimes with tears,--drank my tea and ate my toast, and
occasionally listened to the complaint of an unfortunate Irish damsel,
with her customary account of 'a pain in me side an' a flutterin' about me
heart.' At rare intervals I ministered to some of her countrywomen in
their fulfilment of the great command when placed in the Garden of Eden.
(What a dirty place it would have been if inhabited by Irish women!)</p>
<p>"And thus I spent nearly a year without a single call to any person of
character. I think I should have left in despair if it had not been for a
lovely creature up the street. She was the wife of a distinguished fish
merchant down town.</p>
<p>"This lovely woman was Mrs. Mackerel. I will explain how it was that I
was summoned to her ladyship's mansion, and had the pleasure of seeing Mr.
Mackerel, of the firm of 'Mackerel, Haddock & Dun.'</p>
<p>"One bitter cold night in January, just as I was about to retire, a
furious ring at the front door made me feel particularly amiable! A
servant announced the sudden and alarming illness of Mrs. Mackerel, with
the assurance that as the family physician was out of town, Mrs. M. would
be obliged if I would immediately visit her. Accordingly, I soon found
myself in the presence of the accomplished lady, having--I confess
it--given my hair an extra touch as I entered the beautiful chamber.</p>
<p>"Mrs. Mackerel was not a bad-tempered lady; she was only a beautiful
fool--nothing less, dear reader, or she would have never married old
Mackerel. Her charms would have procured her a husband of at least a
tolerable exterior. His physiognomy presented a remarkable resemblance to
his namesake. Besides, he chewed and smoked, and the combination of the
aroma of his favorite luxuries with the articles of his merchandise must
have been most uncongenial to the curve of such lips and such nostrils as
Mrs. Mackerel's.</p>
<p>"I was received by Mr. Mackerel in a manner that increased observation has
since taught me is sufficiently indicative of the hysterical _finale_ of a
domestic dialogue. He was not so obtuse as to let me directly into the
true cause of his wife's nervous attack and his own collectedness, and yet
he felt it would not answer to make too light of it before me.</p>
<p>"Mr. and Mrs. M. had just returned from a party. (The party must be the
'scape-goat'!) He assured me that as the lady was in the full enjoyment of
health previously, he felt obliged to attribute the cause of her attack
and speechless condition--for she spoke not one word, or gave a sign--to
the dancing, heated room, and the supper.</p>
<p>"I was fully prepared to realize the powers of ice-cream, cake, oranges,
chicken-salad, oysters, sugar-plums, punch, and champagne, and at one
moment almost concluded to despatch a servant for an emetic of ipecac;
but--I prudently avoided it. Aside from the improbability of excess of
appetite through the portal of such a mouth, the lovely color of the
cheeks and lips utterly forbade a conclusion favorable to Mr. Mackerel's
solution of the cause.</p>
<p>"I placed my finger on her delicate and jewelled wrist. All seemed calm as
the thought of an angel's breast!
<p>"I was nonplussed. 'Could any tumultuous passion ever have agitated that
bosom so gently swelling in repose?'</p>
<p>"Mackerel's curious questions touching my sagacity as to his wife's
condition received about as satisfactory a solution as do most questions
put to me on the cause and treatment of diseases; and having tolerably
befogged him with opinions, and lulled his suspicions to rest, by the
apparent innocent answers to his leading questions, he arrived at the
conclusion most desirable to him, viz., that I was a fool--a conviction
quite necessary in some nervous cases....</p>
<p>"So pleased was Mr. M. with the soothing influences of my brief visit that
he very courteously waited on me to the outside door, instead of ordering
a servant to show me out, and astonished me by desiring me to call on the
patient again in the morning.</p>
<p>"After my usual diversion of investigating 'a pain an' a flutterin' about
me heart,' and an 'O, I'm kilt intirely,' I visited Mrs. Mackerel, and had
the extreme pleasure of finding her quite composed, and in conversation
with her fashionable friend, Mrs. Tiptape. The latter was the daughter of
a 'retired milliner,' and had formed a desirable union with Tiptape, the
eminent dry goods merchant. Fortunately--for she was a woman of
influence--I passed the critical examination of Mrs. T. unscathed by her
sharp black eyes, and, as the sequel will show, was considered by her
'quite an agreeable person.'</p>
<p>"Poor Mrs. Mackerel, notwithstanding her efforts to conceal it, had
evidently received some cruel and stunning communication from her husband
on the night of my summons; her agitated circulation during the fortnight
of my attendance showed to my conviction some persistent and secret cause
for her nervousness.</p>
<p>"One evening she assured me that she felt she should now rapidly recover,
as Mr. Mackerel had concluded to take her to Saratoga. I, of course,
acquiesced in the decision, though my previous opinion had not been asked.
I took a final leave of the lovely woman, and the poor child soon departed
for Saratoga.</p>
<p>"The ensuing week there was a sheriff's sale at Mackerel's residence. The
day following the Mackerels' departure, Mr. Tiptape did me the honor to
inquire after the health of my family; and a week later, Master Tiptape
having fallen and bumped his dear nose on the floor, I had the felicity of
soothing the anguish of his mamma in her magnificent _boudoir_, and
holding to her lovely nose the smelling salts, and offering such
consolation as her trying position required!"</p>
<p>Thus was commenced the practice of one of the first physicians of New
York. The facts are avouched for. The names, of course, are manufactured,
to cover the occupation of the parties. The doctor still lives, in the
enjoyment of a lucrative and respectable practice, and the love and
confidence of his numerous friends and patrons.</p>
<p>Quite as ludicrous scenes could be revealed by most physicians, if they
would but take the time to think over their earlier efforts, and the
various circumstances which were mainly instrumental in getting them into
a respectable practice.</p>
<p><em>From <a href="#" target="_blank">"The Funny Side of Physic"</a> by A. D. Crabtre</em></p>
</div>
</div>
</div>
</div>
<nav>
<span id="bb-nav-prev">←</span>
<span id="bb-nav-next">→</span>
</nav>
<span id="tblcontents" class="menu-button">Table of Contents</span>
</div>
</div><!-- /container -->
<script src="jquery-3.4.1.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.jscrollpane.min.js"></script>
<script src="js/jquerypp.custom.js"></script>
<script src="js/jquery.bookblock.js"></script>
<script src="js/page.js"></script>
<script>
$(function() {
Page.init();
});
</script>
</body>
</html>
JS代码(page.js):
var Page = (function(){
var $container = $( '#container' ),$bookBlock = $( '#bb-bookblock' ),$items = $bookBlock.children(),itemsCount = $items.length,current = 0,bb = $( '#bb-bookblock' ).bookblock({
speed:800,perspective:2000,shadowSides:0.8,shadowFlip:0.4,onEndFlip:function(old,page,isLimit){
current = page;
// update TOC currentupdateTOC();
// updateNavigationupdateNavigation( isLimit );
// initialize jScrollPane on the content div for the new itemsetJSP( 'init' );
// destroy jScrollPane on the content div for the old itemsetJSP( 'destroy',old );
}
}
),$navNext = $( '#bb-nav-next' ),$navPrev = $( '#bb-nav-prev' ).hide(),$menuItems = $container.find( 'ul.menu-toc > li' ),$tblcontents = $( '#tblcontents' ),transEndEventNames ={
'WebkitTransition':'webkitTransitionEnd','MozTransition':'transitionend','OTransition':'oTransitionEnd','msTransition':'MSTransitionEnd','transition':'transitionend'}
,transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],supportTransitions = Modernizr.csstransitions;
function init(){
// initialize jScrollPane on the content div of the first itemsetJSP( 'init' );
initEvents();
}
function initEvents(){
// add navigation events$navNext.on( 'click',function(){
bb.next();
return false;
}
);
$navPrev.on( 'click',function(){
bb.prev();
return false;
}
);
// add swipe events$items.on({
'swipeleft':function( event ){
if( $container.data( 'opened' ) ){
return false;
}
bb.next();
return false;
}
,'swiperight':function( event ){
if( $container.data( 'opened' ) ){
return false;
}
bb.prev();
return false;
}
}
);
// show table of contents$tblcontents.on( 'click',toggleTOC );
// click a menu item$menuItems.on( 'click',function(){
var $el = $( this ),idx = $el.index(),jump = function(){
bb.jump( idx + 1 );
}
;
current !== idx ? closeTOC( jump ):closeTOC();
return false;
}
);
// reinit jScrollPane on window resize$( window ).on( 'debouncedresize',function(){
// reinitialise jScrollPane on the content divsetJSP( 'reinit' );
}
);
}
function setJSP( action,idx ){
var idx = idx === undefined ? current:idx,$content = $items.eq( idx ).children( 'div.content' ),apiJSP = $content.data( 'jsp' );
if( action === 'init' && apiJSP === undefined ){
$content.jScrollPane({
verticalGutter:0,hideFocus:true}
);
}
else if( action === 'reinit' && apiJSP !== undefined ){
apiJSP.reinitialise();
}
else if( action === 'destroy' && apiJSP !== undefined ){
apiJSP.destroy();
}
}
function updateTOC(){
$menuItems.removeClass( 'menu-toc-current' ).eq( current ).addClass( 'menu-toc-current' );
}
function updateNavigation( isLastPage ){
if( current === 0 ){
$navNext.show();
$navPrev.hide();
}
else if( isLastPage ){
$navNext.hide();
$navPrev.show();
}
else{
$navNext.show();
$navPrev.show();
}
}
function toggleTOC(){
var opened = $container.data( 'opened' );
opened ? closeTOC():openTOC();
}
function openTOC(){
$navNext.hide();
$navPrev.hide();
$container.addClass( 'slideRight' ).data( 'opened',true );
}
function closeTOC( callback ){
updateNavigation( current === itemsCount - 1 );
$container.removeClass( 'slideRight' ).data( 'opened',false );
if( callback ){
if( supportTransitions ){
$container.on( transEndEventName,function(){
$( this ).off( transEndEventName );
callback.call();
}
);
}
else{
callback.call();
}
}
}
return{
init:init}
;
}
)();
CSS代码(custom.css):
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);html{height:100%;}
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;}
body{font-family:'Lato',Calibri,Arial,sans-serif;background:#fff;font-weight:400;font-size:100%;color:#333;height:100%;}
.js body{overflow:hidden;}
a{color:#555;text-decoration:none;outline:none;}
a:hover{color:#000;}
.container,.bb-custom-wrapper,.bb-bookblock{width:100%;height:100%;}
.container{position:relative;left:0px;-webkit-transition:left 0.3s ease-in-out;-o-transition:left 0.3s ease-in-out;transition:left 0.3s ease-in-out;}
.slideRight{left:240px;}
.no-js .container{padding-left:240px;}
.menu-panel{background:#f1103a;width:240px;height:100%;position:fixed;z-index:1000;top:0;left:0;text-shadow:0 1px 1px rgba(0,0,0,0.1);}
.js .menu-panel{position:absolute;left:-240px;}
.menu-panel h3{font-size:1.8em;padding:20px;font-weight:300;color:#fff;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.05);}
.menu-toc{list-style:none;}
.menu-toc li a{display:block;color:#fff;font-size:1.1em;line-height:3.5;padding:0 20px;cursor:pointer;background:#f1103a;border-bottom:1px solid #dd1338;}
.menu-toc li a:hover,.menu-toc li.menu-toc-current a{background:#dd1338;}
.menu-panel div{margin-top:20px;}
.menu-panel div a{text-transform:uppercase;font-size:0.7em;line-height:1;padding:5px 20px;display:block;border:none;color:#bc0b0b;letter-spacing:1px;font-weight:800;text-shadow:0 1px rgba(255,255,255,0.2);}
.menu-panel div a:hover{background:inherit;color:#fff;text-shadow:none;}
.bb-custom-wrapper nav{top:20px;left:60px;position:absolute;z-index:1000;}
.bb-custom-wrapper nav span,.menu-button{position:absolute;width:32px;height:32px;top:0;left:0;background:#f1103a;border-radius:50%;color:#fff;line-height:30px;text-align:center;speak:none;font-weight:bold;cursor:pointer;}
.bb-custom-wrapper nav span:hover,.menu-button:hover{background:#000;}
.bb-custom-wrapper nav span:last-child{left:40px;}
.menu-button{z-index:1000;left:20px;top:20px;text-indent:-9000px;}
.menu-button:after{position:absolute;content:'';width:50%;height:2px;background:#fff;top:50%;margin-top:-1px;left:25%;box-shadow:0 -4px #fff,0 4px #fff;}
.no-js .bb-custom-wrapper nav span,.no-js .menu-button{display:none;}
.js .content{position:absolute;top:60px;left:0;width:100%;bottom:50px;overflow:hidden;-webkit-font-smoothing:subpixel-antialiased;}
.scroller{padding:10px 5% 10px 5%;}
.js .content:before,.js .content:after{content:'';position:absolute;top:0;left:0;width:100%;height:20px;z-index:100;pointer-events:none;background:-webkit-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);background:-moz-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);background:-o-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);background:linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);}
.js .content:after{top:auto;bottom:0;background:-webkit-linear-gradient(bottom,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);background:-moz-linear-gradient(bottom,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);background:-o-linear-gradient(bottom,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);background:linear-gradient(to top,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);}
.content h2{font-weight:300;font-size:4em;padding:0 0 10px;color:#333;margin:0 1% 40px;text-align:left;box-shadow:0 10px 0 rgba(0,0,0,0.02);text-shadow:0 0 2px #fff;}
.no-js .content h2{padding:40px 1% 20px;}
.content p{font-size:1.2em;line-height:1.6;font-weight:300;padding:5px 8%;text-align:justify;}
@media screen and (max-width:800px){.no-js .menu-panel{display:none;}
.no-js .container{padding:0;}
}
@media screen and (max-width:400px){.menu-panel,.content{font-size:75%;}
}
分享到QQ
分享到微博
微信扫一扫
