特效描述：基于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">©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>
