建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

LeScroll.js 单页滚动 JS 插件

来源:易助科技网浏览量:33收藏

简介


LeScroll.js 可以帮助您创建一个具有CSS转换的响应式单页滚动网站,该插件使用 vanilla JS 编写,使用键盘、鼠标或此页面右侧的项目符号浏览所有不同的部分。

(下载的附件中附有DEMO)


更多单页滚动插件:👉  [ 详情 ]


Vanilla JS 中的基本单页滚动插件 LeScroll.js


插件特点


键盘导航

鼠标滚轮导航

项目符号导航

反应敏捷的


浏览器支持情况


适用于所有支持CSS3的现代浏览器。在下一个版本中将支持IE8 和 IE9。



使用


1.  引入文件


<script src="scripts/lescroll.min.js"></script>



2.  HTML


<div id="mask">
  <nav>
    <ul>
      <li data-section="0"></li>
      <li data-section="1"></li>
      <li data-section="2"></li>
      <li data-section="3"></li>
    </ul>
  </nav>
  <div id="container">
    <section class="turquoise-bg">
      <div class="content">
        Content 1
      </div>
    </section>
    <section class="carrot-bg">
      <div class="content">
        Content 2
      </div>
    </section>
    <section class="blue-bg">
      <div class="content">
        Content 3
      </div>
    </section>
    <section class="turquoise-bg">
      <div class="content">
        Content 4
      </div>
    </section>
  </div>
</div>



3.  调用


只需通过指定元素的id或类以及希望链接到的节来添加一个事件。


leScroll.addEvent('#clickme', 0); 
leScroll.addEvent('.next', 3);



4. 公开方法


如果要将按钮或其他元素链接到某个部分,可以使用 .addEvent 函数

要添加类,请使用:


leScroll.addEvent('.arrowdown', 1);


要添加ID,请使用:


leScroll.addEvent('#clickme', 0);



相关链接


GitHub 地址 :  https://github.com/geomolenaar/LeScroll

易助科技网效果演示地址:  http://demo.easyzone.net.cn/plugin/LeScroll/demo/index.html