仿造fullPage.js https://alvarotrigo.com/fullPage/#firstPage

自己参照网上教程写了一个,加了注释。主要是练习造轮子的能力,需求是不断变化的只拿来用的话谁都会,只有掌握了核心的技术,遇到复杂的需求才不会犯难。以后会按照官网逐渐完善其他功能。欢迎star。

demo:https://hwlv.github.io/myplugin/fullpage/index.html

github:https://github.com/hwlv/myplugin/tree/master/fullpage

使用方法

<script src="js/fullpage.js"></script>
<div id="container" data-PageSwitch="">
<div class="sections">
<div class="section" id="section0">page321</div>
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
</div>
</div>
   $('#container').PageSwitch({
direction:'vertical',//horizontal,vertical
loop:true,
easing:'ease-in-out',
duration:'700'
});

自己动手写fullPage插件的更多相关文章

  1. 自己动手写Android插件化框架

    自己动手写Android插件化框架 转 http://www.imooc.com/article/details/id/252238   最近在工作中接触到了Android插件内的开发,发现自己这种技 ...

  2. 自己动手写Android插件化框架,让老板对你刮目相看

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由达文西发表于云+社区专栏 最近在工作中接触到了Android插件内的开发,发现自己这种技术还缺乏最基本的了解,以至于在一些基本问题上浪 ...

  3. 自己动手写jQuery插件---Tip(提示框)

    对jQuery相信很多同学和我一样平时都是拿来主义,没办法,要怪只能怪jQuery太火了,各种插件基本能满足平时的要求.但是这毕竟不是长久之道,古人云:“授之以鱼,不如授之以渔”. 为了方便之前没有接 ...

  4. 自己动手写Vue插件Toast

    <style> .vue-toast { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; backgrou ...

  5. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  6. 自己动手写插件底层篇—基于jquery移动插件实现

    序言 本章作为自己动手写插件的第一篇文章,会尽可能的详细描述一些实现的方式和预备知识的讲解,随着知识点积累的一点点深入,可能到了后期讲解也会有所跳跃.所以,希望知识点不是很扎实的读者或者是初学者,不要 ...

  7. 自己动手写js分享插件 [支持https] (可以分享QQ空间,微信,新浪微博。。。)

    由于百度分享,jiathis 等分享插件在https下均会报错,就萌生了自己动手写一个分享插件的念头,其实实现起来一点都不难,以下代码都已在https网站运行通过,特附上以下代码:还请各位看官不吝赐教 ...

  8. 【原创】自己动手写工具----XSmartNote [Beta 3.0]

    一.前面的话 在动笔之前,一直很纠结到底要不要继续完成这个工具,因为上次给它码代码还是一年多之前的事情,参考自己动手写工具----XSmartNote [Beta 2.0],这篇博文里,很多园友提出了 ...

  9. 自己动手编写vue插件

    一.为什么要自己动手写插件呢,原因有二: 其一:是因为最近产品了提了一个在web端接收,消息通知的需求,产品要求在若干个页面内如果有消息,就要弹出消息弹窗展示给用户,略加思索之后,第一反应就是写个消息 ...

随机推荐

  1. Struts2 动态调用方法

    struts2动态调用方法有两种方式 方式一:用通配符进行调用: Action方法: package com.bjyinfu.struts.actions; public class CatchDyn ...

  2. storm从入门到放弃(二),任务分配过程-核心机密

    背景:目前就职于国内最大的IT咨询公司,恰巧又是毕业季,所在部门招了100多个应届毕业生,本人要跟部门新人进行为期一个月的大数据入职培训,特此将整理的文档分享出来. 原文和作者一起讨论:http:// ...

  3. Vivado完成综合_实现_生成比特流后发出提醒声音-原创☺

    之前做技术支持时,有过客户吐槽Vivado运行时间长,又不能在完成工作后发送提醒,这两天又有人提起,所以决定写篇帖子. 大家知道,Vivado的技术文档总提及tcl,不过似乎很不招人待见,很少有人研究 ...

  4. Java综合题目

    分支, 循环, 数据类型 1, 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 2, 题目:有一分数序列:2/1,3/2,5/3,8/5,13/8,21/13... ...

  5. 微信小程序开发

    一.基本的准备工作 1.工具安装 工具是有微信官方提供. 2.下载地址: windows32位:https://servicewechat.com/wxa-dev-logic/download_red ...

  6. mybatis中的mapper接口文件以及example类的实例函数以及详解

    ##Example example = new ##Example(); example.setOrderByClause("字段名 ASC"); //升序排列,desc为降序排列 ...

  7. java解析xml汇总(转自倾城幻影-Java解析xml汇总,链接:http://www.cnblogs.com/jiugehuanying/archive/2012/01/12/2320058.html)

    [引言] 目前在Java中用于解析XML的技术很多,主流的有DOM.SAX.JDOM.DOM4j,下文主要介绍这4种解析XML文档技术的使用.优缺点及性能测试. [一.基础知识--扫盲] sax.do ...

  8. 如何在centos7上安装redis

    解压缩 tar zxvf redis-3.0.4.tar.gz 进入解压后的目录 cd redis-3.0.4 使用Make 编译源文件 make 安装 进入源文件的目录 cd src 复制 Redi ...

  9. NYOJ--95--multiset--众数问题

    /* Name: NYOJ--95--众数问题 Date: 20/04/17 16:02 Description: multiset水过 */ #include<set> #include ...

  10. HPU--1091 N!的位数

    1091: N!的位数 [数学] 时间限制: 1 Sec 内存限制: 128 MB提交: 97 解决: 12 统计 题目描述 我们知道n!=n*(n-1)*(n-2)*-*2*1. 那么给定一个n,n ...