zoukankan      html  css  js  c++  java
  • 全屏滚动插件pagePiling.js

    全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验。pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果。支持所有的主流浏览器,包括IE8+,支持移动设备。

    1、引入jquery.js、pagePiling.js、jquery.pagepiling.css文件
    [cc lang="html" escaped="true"]<link rel="stylesheet" href="css/jquery.pagepiling.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.pagepiling.min.js"></script>[/cc]

    2、HTML代码如下给几个section类的div
    [cc lang="html" escaped="true"]<div id="pagepiling">
    <div class="section"><h3>第一屏</h3></div>
    <div class="section"><h3>第二屏</h3></div>
    <div class="section"><h3>第三屏</h3></div>
    <div class="section"><h3>第四屏</h3></div>
    </div>[/cc]

    3、$('#pagepiling')调用pagepiling()方法
    [cc lang="javascript" escaped="true"]$(function(){
    $('#pagepiling').pagepiling();
    });[/cc]

    //pagePiling所有参数的应用实例
    [cc lang="javascript" escaped="true"]$(document).ready(function() {
    $('#pagepiling').pagepiling({
    menu: null,
    direction: 'vertical',
    verticalCentered: true,
    sectionsColor: [],
    anchors: [],
    scrollingSpeed: 700,
    easing: 'swing',
    loopBottom: false,
    loopTop: false,
    css3: true,
    navigation: {
    'textColor': '#000',
    'bulletsColor': '#000',
    'position': 'right',
    'tooltips': ['section1', 'section2', 'section3', 'section4']
    },
    normalScrollElements: null,
    normalScrollElementTouchThreshold: 5,
    touchSensitivity: 5,
    keyboardScrolling: true,
    sectionSelector: '.section',
    animateAnchor: false,

    //events
    onLeave: function(index, nextIndex, direction){},
    afterLoad: function(anchorLink, index){},
    afterRender: function(){},
    });
    });[/cc]
  • 相关阅读:
    Java单例模式(Singleton)以及实现
    golang 垃圾回收机制
    MySQL索引背后的数据结构及算法原理
    简述拥塞控制的四种基本算法
    分库分表
    lvalue & rvalue
    理解linux cpu load
    android使用百度地图SDK获取定位信息
    iOSUIWebView---快停下啦,你的愚蠢的行为
    【翻译自mos文章】当/var/tmp文件夹被remove掉之后,GI crash,并启动失败,原因是ohasd can not create named pipe
  • 原文地址:https://www.cnblogs.com/leixuesong/p/5388290.html
Copyright © 2011-2022 走看看