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

FullView.Js 简单易用的类似原生App的jQuery全屏页面滚动效果插件

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

简介


FullView.Js是一个简单易用的jQuery插件,可以在单页滚动网站或单页web应用程序上实现类似原生App的、移动友好的全屏滚动效果。该插件使访问者能够以平滑的滚动效果浏览分段内容。支持桌面上的键盘、鼠标滚轮,以及触摸设备上的上/下/左/右滑动事件。还附带了一个侧面导航或粘性标题导航栏,其中包含锚链接,允许访问者将页面滚动到特定的内容部分。

(下载的附件中附有DEMO)


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


类似原生App风格的jQuery全屏页面滚动插件FullView.Js


浏览器支持情况


IE 9+ Opera Chrome firefox Android 4.1+ Safari 7.1+



使用


1.  引入文件


添加jQuery FullView。Js插件的JavaScript和CSS文件到网页:


<link rel="stylesheet" href="/path/to/dist/fullview.min.css" />

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/fullview.min.js"></script>



2.  HTML


将内容节添加到全屏页面视图中:


<div id="fullview">
  <div>
    <h2>Section 1</h2>
  </div>
  <div>
    <h2>Section 2</h2>
  </div>
  <div>
    <h2>Section 3</h2>
  </div>
  <div>
    <h2>Section 4</h2>
  </div>
  ...
</div>



3.  调用


初始化顶部元素上的插件,就完成了:


$(function(){
  $("#fullview").fullView();
});


确定是否显示侧面导航。默认值:true:


$("#fullview").fullView({
  dots: true,
  dotsPosition: 'right'
});



4.  更多用法示例


创建一个标题导航栏以在这些部分之间导航:


<div id="navbar">
  <ul>
    <li>
      <a href="#section1">
        Section 1
      </a>
    </li>
    <li>
      <a href="#section2">
        Section 2
      </a>
    </li>
    <li>
      <a href="#section3">
        Section 3
      </a>
    </li>
    <li>
      <a href="#section4">
        Section 4
      </a>
    </li>
  </ul>
</div>


调用


$("#fullview").fullView({
  navbar: "#navbar",
});



5.  对平滑滚动效果应用 easing 功能。


您可能需要一个第三方 easing 库(如jQuery UI或jQueryeasing插件)来实现额外的easing功能。默认值:“swing”。


$("#fullview").fullView({
  easing: 'linear'
});



6.  在页面之间切换时执行的函数。


$("#fullview").fullView({
  onViewChange: function (currentView) {
    // console.log(currentView)
  }
});



7.  启用键盘/鼠标/触摸交互以实现更好的可访问性。默认值:true。


$("#fullview").fullView({
  keyboard<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>ing: true,
  mouseScrolling: true,
  touchScrolling: true
});



8.  确定滚动最后一页时是否返回第一页。默认值:false。


$("#fullview").fullView({
  backToTop: true
});



9.  确定滚动速度。默认值:500ms。


$("#fullview").fullView({
  speed: 800
});



10.  滚动开始/结束时将触发的回调功能。


$("#fullview").fullView({
  onScrollStart:  function (currentView, destinationView, direction) {
    // Do Something
  },
  onScrollEnd:  function (currentView, previousView, direction) {
    // Do Something Usefull
  }
});



配置


OptionTypeDefaultValuesDescription
navbarstringundefinedselectorTo link the elements of the navigation with the sections
dotsbooleantruetrue or falseFor side dots navigation visibility
dotsPositionstringrightright or leftDefines side dots navigation positioning
dotsTooltipsbooleanfalsetrue or falseShows a tooltips for the sections on hover of dots navigation element.
speednumber500milliseconds (>=350)Speed in milliseconds for the scrolling transitions.
easingstringlinearswing, linear (or any third-party easing library)Defines the transition effect.
backToTopbooleanfalsetrue or falseDefines whether scrolling down in the last section should scroll to the start one or not.
keyboardScrollingbooleantruetrue or falseDefines if the scroll can be performed using the keyboard.
mouseScrollingbooleantruetrue or falseDefines if the scroll can be performed using the mouse.
touchScrollingbooleantruetrue or falseDefines if the scroll can be performed using the touch.
onScrollStartfunctionnullcallbackThis callback return the element of current section, element of destination section and scroll direction on every scroll Start.
onScrollEndfunctionnullcallbackThis callback return the element of current section, element of previous section and scroll direction on every scroll finish.



相关链接


GitHub 地址 :  https://github.com/seeratawan01/fullview.js

易助科技网基本效果演示和文档地址:  http://demo.easyzone.net.cn/plugin/fullViewScroll/demo/index.html

易助科技网基本滚动效果演示地址: http://demo.easyzone.net.cn/plugin/fullViewScroll/demo/simple.html

易助科技网easing滚动效果演示地址:   http://demo.easyzone.net.cn/plugin/fullViewScroll/demo/easing.html