一款jQuery和css3全屏翻页切换页面特效,可以点击左右箭头来切换不同的页面内容,也可以点击左上角的菜单图标按钮打开侧边栏的文字导航,点击每一个文字导航来切换内容,支持鼠标拖动翻页和鼠标滚动查看更多图文内容。
页面的head部分,需引入3个css文件和一个js文件,代码如下:
<link type="text/css" rel="stylesheet" href="css/jquery.jscrollpane.custom.css" />
<link type="text/css" rel="stylesheet" href="css/bookblock.css" />
<link type="text/css" rel="stylesheet" href="css/custom.css" />
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
页面的body部分,用了div的嵌套结构,部分代码如下:
<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>
<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><img src="images/img1.jpg"></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><img src="images/img2.jpg"></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="http://www.sucaihuo.com" target="_blank">"The Funny Side of Physic"</a> by A. D. Crabtre</em></p>
</div>
</div>
</div>
页面的底部,需引入jQuery库和其他JS文件,代码如下:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="js/jquerypp.custom.js"></script>
<script type="text/javascript" src="js/jquery.bookblock.js"></script>
<script type="text/javascript" src="js/page.js"></script>
<script>
$(function() {
Page.init();
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791