FIG jQuery rotation of plug (fullpage)

FIG jQuery rotation of plug (fullpage)

fullpage full-screen plug-in

fullPage.js is a jQuery-based plug-in that can help you easily, very easily create a full-screen website.

== github official website == github.com/alvarotrigo...

== Chinese Demo == www.dowebok.com/demo/2014/7...

The main features are:

• Support for mouse scroll

• Forward and back support and keyboard control

• Many callbacks

• Support for mobile phones, flat-panel touch event

• Support for CSS3 animations

• Support Window Scaling

• Automatically adjust the zoom window

• Scroll width can be set, the background color, the scroll speed, cycle option, callback, text alignment, etc.

reference materials

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
 <!-- jquery.easings.min.js 是必须的，用于 easing 参数，也可以使用完整的 jQuery UI 代替 -->
<script src="js/jquery.easings.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
复制代码

HTML structure

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>
复制代码

JavaScript entry function

$(function(){
    $('#fullpage').fullpage();
});
复制代码

fullpage detailed parameters

Options	Types of	Defaults	Explanation
verticalCentered	String	true	Whether the content is centered vertically
resize	Boolean value	false	With window scaling font is scaled
sectionColor	function	no	Set the background color
anchors	Array	no	Defined anchor link
scrollingSpeed	Integer	700	Scrolling speed in milliseconds
easing	String	easeInQuart	Scroll animation
menu	Boolean value	false	After the anchors corresponding to the value associated with the binding properties of the menu, setting, you can control the scrolling menu
navigation	Boolean value	false	Whether to display the navigation project
navigationPosition	String	right	Location of the project navigation, optional left or right
navigationTooltips	Array	air	Project Navigator's tip
slidesNavigation	Boolean value	false	Whether to display the slider left and right navigation project
slidesNavPosition	String	bottom	Project Navigator slider left and right positions, optional top or bottom
controlArrowColor	String	#fff	The background color of the left and right arrow slider
loopBottom	Boolean value	false	Whether go back to the top of the scroll to the bottom
loopTop	Boolean value	false	Whether rolling bottom to the very top of the scroll
loopHorizontal	Boolean value	true	Whether circulating around the slider slides
autoscrolling	Boolean value	true	Whether to use a plug-in scroll mode, if you select false, the browser that comes with a scroll bar will appear
scrollOverflow	Boolean value	false	Whether the content is displayed for more than full screen scroll bar
css3	Boolean value	false	Whether to use CSS3 transforms scroll
paddingTop	String	0	And the distance from the top of
paddingBottom	String	0	And from the bottom
fixedElements	String	no
normalScrollElements		no
keyboardScrolling	Boolean value	true	Whether to use the keyboard arrow keys to navigate
touchSensitivity	Integer	5
continuousVertical	Boolean value	false	Whether rolling cycle, is not compatible with loopTop and loopBottom
animateAnchor	Boolean value	true
normalScrollElementTouchThreshold	Integer	5

fullPage.js method

You need to add a note to use when:

== $ fn.fullpage ==.
For example:

$.fn.fullpage.moveTo(1);
复制代码

name	Explanation
moveSectionUp ()	Scroll up
moveSectionDown ()	Scroll down
moveTo(section, slide)	Scroll to the
moveSlideRight()	slide scroll right
moveSlideLeft()	Scroll Left slide
setAutoScrolling()	Settings page scroll mode, set auto scroll to true
setAllowScrolling()	Add or delete the mouse wheel / control touchpad
setKeyboardScrolling()	Add or delete keyboard arrow keys to control
setScrollingSpeed()	Scrolling speed defined in units of milliseconds

Callback

name	Explanation
afterLoad	Callback function to scroll a screen after receiving two anchorLink and index parameters, anchorLink anchor link name, serial number index is calculated starting from 1
onLeave	Before scrolling callback function, receiving index, nextIndex and direction 3 parameters: index is the "page" of the number away, calculated from the start 1; nextIndex rolling into "pages" of the serial number, calculated from the start 1; direction is determined to or scroll down on the scroll, the value is up or down.
after trenches	页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
afterSlideLoad	滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave	某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数

转载于:https://juejin.im/post/5cfbab54f265da1bac400965