jQuery和css3全屏翻页切换页面特效

jQuery和css3全屏翻页切换页面特效

添加时间:2021-03-12 21:17:16
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:列表切换
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

一款jQuery和css3全屏翻页切换页面特效,可以点击左右箭头来切换不同的页面内容,也可以点击左上角的菜单图标按钮打开侧边栏的文字导航,点击每一个文字导航来切换内容,支持鼠标拖动翻页和鼠标滚动查看更多图文内容。
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="https://jy.tp.yuanmeng.life/" 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>
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:jQuery和css3全屏翻页切换页面特效

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.163865s