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]
  • 相关阅读:
    xpath获取a标签下文本
    Python学习笔记Day26
    DNS原理
    命令实战解析
    linux系统ext文件系统知识
    磁盘分区重点知识
    机械磁盘读写磁盘数据的原理
    linux用户管理
    linux命令讲解
    linux系统定时任务
  • 原文地址:https://www.cnblogs.com/leixuesong/p/5388290.html
Copyright © 2011-2022 走看看