fullPage鏁欑▼ -- 鏁村睆婊氬姩鏁堟灉鎻掍欢 fullpage璇﹁В

Posted 2020-08-09

鏍囩锛?/p>

鏈枃涓?鍏勫紵杩濱T鏁欒偛 鏈烘瀯瀹樻柟 html5鍩硅 鏁欑▼锛屼富瑕佷粙缁嶏細fullPage鏁欑▼ -- 鏁村睆婊氬姩鏁堟灉鎻掍欢 fullpage璇﹁В
1銆佸紩鐢ㄦ枃浠禰html] view plain copy print?鍦–ODE涓婃煡鐪嬩唬鐮佺墖娲剧敓鍒版垜鐨勪唬鐮佺墖
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

2銆乭tml閮ㄥ垎[html] view plain copy print?鍦–ODE涓婃煡鐪嬩唬鐮佺墖娲剧敓鍒版垜鐨勪唬鐮佺墖
<div class="section">绗竴灞?lt;/div>
<div class="section">绗簩灞?lt;/div>
<div class="section">
<div class="slide">绗笁灞忕殑绗竴灞?lt;/div>
<div class="slide">绗笁灞忕殑绗簩灞?lt;/div>
<div class="slide">绗笁灞忕殑绗笁灞?lt;/div>
<div class="slide">绗笁灞忕殑绗洓灞?lt;/div>
</div>
<div class="section">绗洓灞?lt;/div>

3銆佷娇鐢ㄦ柟娉昜javascript] view plain copy print?鍦–ODE涓婃煡鐪嬩唬鐮佺墖娲剧敓鍒版垜鐨勪唬鐮佺墖
$(document).ready(function() {
$.fn.fullpage({
slidesColor: [鈥?1bbc9b鈥? 鈥?4BBFC3鈥? 鈥?7BAABE鈥? 鈥?f90鈥榏,
anchors: [鈥榩age1鈥? 鈥榩age2鈥? 鈥榩age3鈥? 鈥榩age4鈥榏
});
});

4銆佽缁唎ptions鍙傛暟
鍙傛暟 绫诲瀷 璇存槑 榛樿鍊?br />verticalCentered 瀛楃涓?鍐呭鏄惁鍨傜洿灞呬腑 true
resize 甯冨皵鍊?瀛椾綋鏄惁闅忕潃绐楀彛缂╂斁鑰岀缉鏀?false
slidesColor 鍑芥暟 璁剧疆鑳屾櫙棰滆壊锛屽锛?鏃?br />anchors 鏁扮粍 瀹氫箟閿氶摼鎺?鏃?br />scrollingSpeed 鏁存暟 婊氬姩閫熷害锛屽崟浣嶄负姣 700
easing 瀛楃涓?婊氬姩鍔ㄧ敾鏂瑰紡 easeInQuart
menu 甯冨皵鍊?缁戝畾鑿滃崟锛岃瀹氱殑鐩稿叧灞炴€т笌 anchors 鐨勫€煎搴斿悗锛岃彍鍗曞彲浠ユ帶鍒舵粴鍔?false
navigation 甯冨皵鍊?鏄惁鏄剧ず椤圭洰瀵艰埅 false
navigationPosition 瀛楃涓?椤圭洰瀵艰埅鐨勪綅缃紝鍙€?left 鎴?right right
navigationColor 瀛楃涓?椤圭洰瀵艰埅鐨勯鑹?#000
navigationTooltips 鏁扮粍 椤圭洰瀵艰埅鐨?tip 鏃?br />slidesNavigation 甯冨皵鍊?鏄惁鏄剧ず宸﹀彸婊戝潡鐨勯」鐩鑸?false
slidesNavPosition 瀛楃涓?宸﹀彸婊戝潡鐨勯」鐩鑸殑浣嶇疆锛屽彲閫?top 鎴?bottom bottom
controlArrowColor 瀛楃涓?宸﹀彸婊戝潡鐨勭澶寸殑鑳屾櫙棰滆壊 #fff
loopBottom 甯冨皵鍊?婊氬姩鍒版渶搴曢儴鍚庢槸鍚︽粴鍥為《閮?false
loopTop 甯冨皵鍊?婊氬姩鍒版渶椤堕儴鍚庢槸鍚︽粴搴曢儴 false
loopHorizontal 甯冨皵鍊?宸﹀彸婊戝潡鏄惁寰幆婊戝姩 true
autoScrolling 甯冨皵鍊?鏄惁浣跨敤鎻掍欢鐨勬粴鍔ㄦ柟寮忥紝濡傛灉閫夋嫨 false锛屽垯浼氬嚭鐜版祻瑙堝櫒鑷甫鐨勬粴鍔ㄦ潯 true
scrollOverflow 甯冨皵鍊?鍐呭瓒呰繃婊″睆鍚庢槸鍚︽樉绀烘粴鍔ㄦ潯 false
css3 甯冨皵鍊?鏄惁浣跨敤 JavaScript 鎴?CSS3 transforms 婊氬姩 false
paddingTop 瀛楃涓?涓庨《閮ㄧ殑璺濈 0
paddingBottom 瀛楃涓?涓庡簳閮ㄨ窛绂?0
fixedElements 瀛楃涓? 鏃?br />normalScrollElements 鏃?br />afterLoad 鍑芥暟 婊氬姩鍒版煇涓€灞忓悗鐨勫洖璋冨嚱鏁帮紝鎺ユ敹 anchorLink 鍜?index 涓や釜鍙傛暟锛宎nchorLink 鏄敋閾炬帴鐨勫悕绉帮紝index 鏄簭鍙凤紝浠?寮€濮嬭绠?鏃?br />onLeave 鍑芥暟 婊氬姩鍓嶇殑鍥炶皟鍑芥暟锛屾帴鏀?index 鍜?direction 涓や釜鍙傛暟锛宨ndex 鏄簭鍙凤紝浠?寮€濮嬭绠楋紝direction 鍒ゆ柇寰€涓婃粴鍔ㄨ繕鏄線涓嬫粴鍔?鏃?br />afterRender 鍑芥暟 椤甸潰缁撴瀯鐢熸垚鍚庣殑鍥炶皟鍑芥暟锛屾垨鑰呰椤甸潰鍒濆鍖栧畬鎴愬悗鐨勫洖璋冨嚱鏁?鏃?br />afterSlideLoad 鍑芥暟 婊氬姩鍒版煇涓€姘村钩婊戝潡鍚庣殑鍥炶皟鍑芥暟锛屼笌 afterLoad 绫讳技锛屾帴鏀?anchorLink銆乮ndex銆乻lideIndex銆乨irection 4涓弬鏁?鏃?br />onSlideLeave 鍑芥暟 鏌愪竴姘村钩婊戝潡婊氬姩鍓嶇殑鍥炶皟鍑芥暟锛屼笌 onLeave 绫讳技锛屾帴鏀?anchorLink銆乮ndex銆乻lideIndex銆乨irection 4涓弬鏁?/p>