Amaze UI

JS 插件

Amaze UI JS 插件,使用注意事项,以及 JS 插件介绍。

ScrollSpy


窗口滚动时为根据设置页面元素添加动画效果(仅在支持 CSS3 动画的浏览器上有效)。

使用演示

下面的演示中包含了各种动画效果。

Fade
生命是一团欲望,欲望不满足便痛苦,满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
Scale-up
生命是一团欲望,欲望不满足便痛苦,满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
Scale-down
生命是一团欲望,欲望不满足便痛苦,满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
Slide Top
生命是一团欲望,欲望不满足便痛苦,满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
Slide Bottom
生命是一团欲望,欲望不满足便痛苦,满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
Slide Right
生命是一团欲望,欲望不满足便痛苦,满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
Slide Left
生命是一团欲望,欲望不满足便痛苦,满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
Fade
生命是一团欲望,欲望不满足便痛苦,满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
Fade delay: 300
生命是一团欲望,欲望不满足便痛苦,满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
Fade delay: 600
生命是一团欲望,欲望不满足便痛苦,满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
Fade delay: 900
生命是一团欲望,欲望不满足便痛苦,满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
<div class="am-panel am-panel-default" data-am-scrollspy="{animation: 'fade'}">...</div>

<div class="am-panel am-panel-default" data-am-scrollspy="{animation: 'fade', delay: 300}">...</div>

调用方式

通过 Data API

添加 data-am-scrollspy 属性,并设置相关属性。

属性描述
data-am-scrollspy="{animation:'fade'}"动画类名,参见 Amaze UI 动画库,默认为 fade
data-am-scrollspy="{animation:'fade', delay: 300}"延迟动画执行时间(ms),默认为 0
data-am-scrollspy="{animation:'fade', repeat: false}"是否重复动画,默认为 true

JS 调用

通过 $().scrollspy(options) 设置,参数同上。

ScrollSpy via JS
生命是一团欲望,欲望不满足便痛苦,满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
<div class="am-panel am-panel-primary" id="my-scrollspy">
  <div class="am-panel-hd">ScrollSpy via JS
  </div>
  <div class="am-panel-bd">
    生命是一团欲望,欲望不满足便痛苦,满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
  </div>
</div>
<script>
$(function() {
  $('#my-scrollspy').scrollspy({
    animation: 'slide-left',
    delay: 500
  })
});
</script>

自定义事件

事件名称描述
inview.scrollspy.amui元素进入窗口可视区域时触发
outview.scrollspy.amui元素离开窗口可视区域时触发
$(function() {
  $('#my-scrollspy').on('inview.scrollspy.amui', function() {
    console.log('进入视口');
  }).on('outview.scrollspy.amui', function() {
    console.log('离开视口');
  });
});

MutationObserver

通过 Mutation Observer 可以实现动态加载元素的动画效果。

在下面插入一些元素试试:

<p><button class="am-btn am-btn-primary" id="doc-scrollspy-insert">插入</button></p>
<div id="doc-scrollspy-wrapper" data-am-observe>
  <p>在下面插入一些元素试试:</p>
</div>
$(function() {
  var i = 1;
  var $wrapper = $('#doc-scrollspy-wrapper');
  var appendPanel = function(index) {
    var panel = '<div class="am-panel am-panel-primary" ' +
      'data-am-scrollspy="{animation: \'scale-up\'}">' +
      '<div class="am-panel-bd">我是第' + index + '个插入的元素。</div></div>';
    $wrapper.append(panel);
  };

  $('#doc-scrollspy-insert').on('click', function() {
    appendPanel(i);
    i++;
  });
});
侧栏导航
Amaze UI 微信
在微信上关注我们