基于jQuery实现百度百科史记滑动切换效果



33 130 44



特效描述:基于jQuery实现 百度百科史记 滑动切换效果,基于jQuery实现百度百科史记滑动切换效果

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/jquery.fullPage.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.10.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>

3. HTML代码

<ul id="menu">
	<li data-menuanchor="page1" class="active"><a href="#page1">TOP</a></li>
	<li data-menuanchor="page2"><a href="#page2">科技卷</a></li>
	<li data-menuanchor="page3"><a href="#page3">人物卷</a></li>
	<li data-menuanchor="page4"><a href="#page4">社会卷</a></li>
	<li data-menuanchor="page5"><a href="#page5">网络卷</a></li>
	<li data-menuanchor="page6"><a href="#page6">合作媒体</a></li>
</ul>
<div class="section section1">
	<div class="screen-main">
		<span class="shi1"  rel="-501,-455,449,245"></span>
		<span class="shi2"  rel="1387,-359,387,295"></span>
		<span class="shi3"  rel="-619,-359,381,341"></span>
		<span class="shi4"  rel="1295,-259,398,441"></span>
		<span class="ji1"  rel="-328,-589,673,111"></span>
		<span class="ji2"  rel="1648,-487,648,213"></span>
		<span class="ji3"  rel="-244,-488,756,212"></span>
		<span class="year2"  rel="1686,-213,686,487"></span>
		<span class="year0"  rel="-266,-189,734,511"></span>
		<span class="year1"  rel="1792,-210,792,490"></span>
		<span class="year3"  rel="-173,-207,827,493"></span>
		<span class="slogen"  rel="1462,-106,462,594"></span>
	</div>
</div>
<div class="section">
	<div class="science-inner inner">
		<a class="stiteml st1" href="javascript:void(0)" rel="0,-350,0,7">网络机顶盒</a>
		<a class="stiteml st2" href="javascript:void(0)" rel="0,-350,0,37">干细胞人造肉</a>
		<a class="stiteml st3" href="javascript:void(0)" rel="0,-350,0,68">3D涂鸦笔</a>
		<a class="stiteml st4" href="javascript:void(0)" rel="0,-350,0,88">H7N9</a>
		<a class="stiteml st5" href="javascript:void(0)" rel="1010,116,554,116">测癌试纸</a>
		<a class="stiteml st6" href="javascript:void(0)" rel="1010,146,554,146">辽宁号航空母舰</a>
		<a class="stiteml st7" href="javascript:void(0)" rel="1010,163,554,163">神舟十号飞船</a>
		<a class="stiteml st8" href="javascript:void(0)" rel="1010,236,554,236">蛟龙号载人潜水器</a>
		<a class="stitemr st9" href="javascript:void(0)" rel="-710,346,290,346">三亲婴儿</a>
		<a class="stitemr st10" href="javascript:void(0)" rel="-710,376,290,376">网格细胞</a>
		<a class="stitemr st11" href="javascript:void(0)" rel="-710,406,224,406">好奇号火星探测器</a>
		<a class="stitemr st12" href="javascript:void(0)" rel="-710,433,30,433">穿戴式智能设备</a>
		<a class="stiteml st13" href="javascript:void(0)" rel="761,1050,761,506">上帝粒子</a>
		<a class="stiteml st14" href="javascript:void(0)" rel="761,1050,761,523">比特币</a>
		<a class="stiteml st15" href="javascript:void(0)" rel="761,1050,761,587">ISON彗星</a>
		<a class="stiteml st16" href="javascript:void(0)" rel="761,1050,761,622">玉兔号</a>
		<a class="stiteml st17" href="javascript:void(0)" rel="761,1050,761,656">4G</a>
		<a class="stimg1" href="javascript:void(0)" rel="0,-350,0,153"><img width="181" height="166" src="images/h7n9.jpg"></a>
		<a class="stimg2" href="javascript:void(0)" rel="980,2,220,2"><img width="313" height="317" src="images/shenshi.png"></a>
		<a class="stimg3" href="javascript:void(0)" rel="-407,350,413,350"><img width="313" height="215" src="images/zhuangbei.jpg"></a>
		<a class="stimg4" href="javascript:void(0)" rel="761,850,761,350"><img width="200" height="138" src="images/bit.jpg"></a>
	</div>
</div>
<div class="section">
	<div class="famous-inner inner">
		<a class="faitemr fa1" href="javascript:void(0)"  rel="90,-180,90,68">龚爱爱</a>
		<a class="faitemr fa2" href="javascript:void(0)" rel="90,-180,90,93">李某某</a>
		<a class="faitemr fa3" href="javascript:void(0)" rel="0,-180,0,113">彭丽媛</a>
		<a class="faiteml fa4" href="javascript:void(0)" rel="1280,203,235,203">撒切尔夫人</a>
		<a class="faiteml fa5" href="javascript:void(0)" rel="1280,227,235,227">安吉丽娜•朱莉</a>
		<a class="faiteml fa6" href="javascript:void(0)" rel="1080,290,235,290">雷政富</a>
		<a class="faiteml fa7" href="javascript:void(0)" rel="-300,317,100,317,">斯诺登</a>
		<a class="faiteml fa8" href="javascript:void(0)" rel="-300,533,149,533">陈永洲</a>
		<a class="faiteml fa9" href="javascript:void(0)" rel="-300,563,149,563">埃隆·马斯克</a>
		<a class="faiteml fa10" href="javascript:void(0)" rel="-300,593,149,593">曼德拉</a>
		<a class="faiteml fa11" href="javascript:void(0)" rel="1370,383,786,383">小黄人</a>
		<a class="faiteml fa12" href="javascript:void(0)" rel="1370,450,786,450">薄熙来</a>
		<a class="faiteml fa13" href="javascript:void(0)" rel="1370,480,786,480">薛蛮子</a>
		<a class="faiteml fa14" href="javascript:void(0)" rel="1370,510,786,510">夏俊峰</a>
		<a class="faiteml fa15" href="javascript:void(0)" rel="1370,540,786,540">万爱花</a>
		<a class="faimg1" href="javascript:void(0)" rel="200,-180,200,10"><img width="169" height="169" src="images/guomu.jpg"></a>
		<a class="faimg2" href="javascript:void(0)" rel="980,77,600,77"><img width="284" height="211" src="images/zhuli.jpg"></a>
		<a class="faimg3" href="javascript:void(0)" rel="980,366,290,366"><img width="491" height="328" src="images/xiaohuangren.png"></a>
		<a class="faimg4" href="javascript:void(0)" rel="-300,387,149,387"><img width="139" height="86" src="images/sinuodeng.jpg"></a>
	</div>
</div>
<div class="section">
	<div class="social-inner inner">
		<a class="soiteml so1" href="javascript:void(0)" rel="450,-175,450,51">PM2.5</a>
		<a class="soiteml so2" href="javascript:void(0)" rel="450,-175,450,110">中国梦</a>
		<a class="soiteml so3" href="javascript:void(0)" rel="450,-175,450,140">大黄鸭</a>
		<a class="soiteml so4" href="javascript:void(0)" rel="980,228,450,228">光大“乌龙指”事件</a>
		<a class="soiteml so5" href="javascript:void(0)" rel="980,258,450,258">上海自由贸易区</a>
		<a class="soiteml so6" href="javascript:void(0)" rel="980,288,450,288">以房养老</a>
		<a class="soiteml so7" href="javascript:void(0)" rel="980,340,450,340">爸爸去哪儿</a>
		<a class="soiteml so8" href="javascript:void(0)" rel="980,363,450,363">十八届三中全会</a>
		<a class="soiteml so9" href="javascript:void(0)" rel="980,428,450,428">美国政府停摆</a>
		<a class="soiteml so10" href="javascript:void(0)" rel="-405,369,162,369">中国大妈</a>
		<a class="soiteml so11" href="javascript:void(0)" rel="-405,434,162,434">中国汉字听写大会</a>
		<a class="soiteml so12" href="javascript:void(0)" rel="-405,464,162,464">互联网金融</a>
		<a class="soitemr so13" href="javascript:void(0)" rel="15,850,15,520">广州恒大足球俱乐部</a>
		<a class="soitemr so14" href="javascript:void(0)" rel="376,1050,376,585">单独二胎</a>
		<a class="soitemr so15" href="javascript:void(0)" rel="376,1050,357,612">中国式放假</a>
		<a class="soimg1" href="javascript:void(0)" rel="156,-175,156,10"><img width="270" height="160" src="images/wumai.jpg"></a>
		<a class="soimg2" href="javascript:void(0)" rel="-405,186,155,186"><img width="270" height="165" src="images/dama.jpg"></a>
		<a class="soimg3" href="javascript:void(0)" rel="980,186,675,186"><img width="277" height="166" src="images/18da.jpg"></a>
		<a class="soimg4" href="javascript:void(0)" rel="507,850,507,494"><img width="203" height="169" src="images/hengda.jpg"></a>
	</div>
</div>
<div class="section">
	<div class="net-inner inner">
		<a class="netitemr net1" href="javascript:void(0)" rel="19,-240,19,56">剁手族</a>
		<a class="netitemr net2" href="javascript:void(0)" rel="0,-240,086">喜大普奔</a>
		<a class="netitemr net3" href="javascript:void(0)" rel="0,-240,116">累觉不爱</a>
		<a class="netitemr net4" href="javascript:void(0)" rel="19,-240,19,146">陈欧体</a>
		<a class="netitemr net5" href="javascript:void(0)" rel="-54,-240,-54,176">为什么放弃治疗</a>
		<a class="netitemr net6" href="javascript:void(0)" rel="-32,-240,-32,206">大概8点20发</a>
		<a class="netiteml net7" href="javascript:void(0)" rel="980,-1,449,-1">绿茶婊</a>
		<a class="netiteml net8" href="javascript:void(0)" rel="980,28,449,28">人艰不拆</a>
		<a class="netiteml net9" href="javascript:void(0)" rel="980,50,449,50">臣妾做不到体</a>
		<a class="netiteml net10" href="javascript:void(0)"  rel="980,116,449,116">女汉子</a>
		<a class="netiteml net11" a href="javascript:void(0)"  rel="980,146,449,146">注定孤独一生</a>
		<a class="netiteml net12" a href="javascript:void(0)"  rel="980,184,449,184">我和小伙伴们都惊呆了</a>
		<a class="netitemr net13" a href="javascript:void(0)"  rel="-435,261,265,261">高端大气上档次</a>
		<a class="netitemr net14" a href="javascript:void(0)"  rel="-435,291,103,291">待我长发及腰</a>
		<a class="netitemr net15" a href="javascript:void(0)" rel="-435,351,8,351">土豪我们做朋友吧</a>
		<a class="netitemr net16" a href="javascript:void(0)"  rel="-435,428,63,428">内什么</a>
		<a class="netitemr net17" a href="javascript:void(0)"  rel="-435,458,63,458">涨姿势</a>
		<a class="netiteml net18" a href="javascript:void(0)" style="left: 449px; top: 578px;" rel="449,1140,449,578">上头条</a>
		<a class="netiteml net19" a href="javascript:void(0)" style="left: 449px; top: 608px;" rel="449,1140,449,608">妈妈再打我一次</a>
		<a class="netiteml net20" a href="javascript:void(0)" style="left: 449px; top: 638px;" rel="449,1140,449,638">因霾劝菜</a>
		<a class="netimg1" a href="javascript:void(0)" rel="139,-240,139,57"><img width="289" height="178" src="images/chenqie.jpg"></a>
		<a class="netimg2" a href="javascript:void(0)" rel="980,96,809,96"><img width="108" height="93" src="images/jingdai.png"></a>
		<a class="netimg3" a href="javascript:void(0)" rel="-435,431,179,431"><img width="205" height="174" src="images/cezhi.jpg"></a>
		<a class="netimg4" a href="javascript:void(0)" rel="451,850,451,267"><img width="270" height="291" src="images/changfa.jpg"></a>
	</div>
</div>
<div class="section">
	<div class="zanzhu">
		<h2>合作媒体</h2>
		<div class="zanzhu-con">
			<a href="javascript:void(0)"><img width="190" height="76" src="images/zhongguoshisheng.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/beijingxinwen.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/jiangxijiaotong.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/jinanjiaotong.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/zhejiangjiaotong.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/hubeijiaotong.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/xichuanwenyi.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/hunanjiaotong.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/heibeixinwen.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/weibo.png"></a>
		</div>
		<div class="foot clearfix">
			<p class="bd">如想投诉,请到<a target="_blank" href="javascript:void(0)">百度百科投诉中心</a>;如想提出意见、建议,请到<a target="_blank" href="javascript:void(0)">意见反馈</a>;想要了解您在百度百科的权利与义务,请查看<a target="_blank" href="javascript:void(0)">权利声明</a>。</p>
			<p class="ft">&copy;2014Baidu<a target="_blank" href="javascript:void(0)">使用百度前必读</a>|<a target="_blank" href="javascript:void(0)">百科协议</a>|<a target="_blank" href="javascript:void(0)">百度百科合作平台</a></p>
		</div>
	</div>
</div>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片叠加 图片层叠 图片翻转 图片旋转 图片延迟加载 图片延迟 图片加载 图片拖动 图片拖拽 图片淡出淡进 图片淡出 图片淡进 图片全屏 头像上传 图片上传 二维码 图片放大镜 h5图片动画 h5图标动画 html5图片动画 html5图标动画 带缩略图的幻灯片 地图 中国地图 世界地图 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 滚动切换 滚动条切换 滑动选项卡 滑动切换 图片广告 图片收缩展开 图片收缩 图片展开 纯图片轮播 图片轮播 图片滚动 图片滚动条 图片滑动 图片滑块 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 图片切换 图片选项卡 图标选项卡 自动滚动图片轮播 图标导航 图标菜单 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 背景切换 大图切换 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 图表 图片 图片插件 头像截图 导航切换 菜单切换 滑动选项卡 滑动切换 全屏切换 响应式图片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到