jQuery全屏頁面滾動切換代碼



70 278 93



特效描述:jQuery 全屏頁面 滾動切換代碼,jQuery全屏頁面滾動切換代碼

代碼結構

1. 引入CSS

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

2. 引入JS

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery-migrate-1.2.1.min.js"></script>
<script src="assets/js/jquery.swipe-events.js"></script>
<script src="assets/js/prismjs.js"></script>
<script src="assets/js/fsvs.js"></script>
<script src="assets/js/main.js"></script>

3. HTML代碼

        <div id="fsvs-body">
            <div class="slide" id="fsvs-initial-setup">
                <h1 class="htmleaf-title">FSVS-jQuery和CSS3帶過渡效果的全屏整頁垂直滾動特效插件</h1>
				                    <pre><code class="language-javascript">
$(document).ready( function() {
    // The HTML tag must have a class of fsvs
    var fsvs = $.fn.fsvs({
        speed : 1000
    });
});
                    </code></pre>
                </div>
            </div>
            <div class="slide" id="basic-html-setup">
                <h2>Basic HTML setup</h2>
                <div>
                    <pre><code class="language-php">
&lt;!doctype html&gt;
&lt;html class="fsvs" lang="en"&gt;
    &lt;body&gt;
        &lt;div id="fsvs-body"&gt;
            &lt;div class="slide"&gt;&lt;/div&gt;
            &lt;div class="slide"&gt;&lt;/div&gt;
            &lt;div class="slide"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
                    </code></pre>
                </div>
            </div>
            <div class="slide">
                <h2>Default Options</h2>
    <pre><code class="language-javascript">
$(document).ready( function() {
    var fsvs = $.fn.fsvs({
        speed : 5000,
        bodyID : 'fsvs-body',
        selector : '> .slide',
        mouseSwipeDisance : 40,
        afterSlide : function(){},
        beforeSlide : function(){},
        endSlide : function(){},
        mouseWheelEvents : true,
        mouseDragEvents : true,
        touchEvents : true,
        arrowKeyEvents : true,
        pagination : true,
        nthClasses : false,
        detectHash : true
    });
});
    </code></pre>
            </div>
            <div class="slide">
                <h2>Load In New Slides On End</h2>
    <pre><code class="language-javascript">
$(document).ready( function() {
    var slider = $.fn.fsvs({
        ...
        endSlide : function(index) {
            $('&lt;div class="slide"&gt;&lt;h2&gt;Slide ' + (index+2) + '&lt;/h2&gt;&lt;/div&gt;').appendTo( $('body') );
            // reset the nth classes if you need it
            slider.nthClasses(3);
            // rebind pagination if you need it
            slider.addPagination();
        }
        ...
    });
});
</code></pre>
            </div>
        </div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滾動切換 滾動條切換 滑動選項卡 滑動切換 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 全屏滾動 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子