☰

Galaxy

Galaxy是一个与样式弱关联的解决网站绝大部分动效的js库。常见的动效有轮播图、跑马灯、标签切换、手风琴、滚动监听、菜单展示等等。

兼容性

IE9+（含）
Chrome
Firefox

下载

galaxy.min.js 73.79KB (已压缩)

galaxy.js 174.54KB (未压缩)

用法

首先加载库文件

<!DOCTYPE html>
<html>
<head>
  ...
  <script src="./assets/js/galaxy.min.js"></script>
  ...
</head>
<body>
  ...
</body>
</html>

编写HTML结构。轮播图在通常情况下的结构如下所示。HTML中的类名不是固定的。

<div class="carousel" id="usageDemo">
  <ul class="carousel-wrapper">
    <li class="carousel-slide">slide1</li>
    <li class="carousel-slide">slide2</li>
    <li class="carousel-slide">slide3</li>
    <li class="carousel-slide">slide4</li>
  </ul>
  <div class="carousel-pagination"></div>
  <a href="javascript:;" class="carousel-arrow carousel-prev">&lt;</a>
  <a href="javascript:;" class="carousel-arrow carousel-next">&gt;</a>
</div>

添加css样式。galaxy只会添加必要的样式，其他样式需要用户自行添加。最好能做到即使不引入galaxy情况下，页面布局也不会乱，仅仅是没有动效。

<style>
  .carousel{position:relative;width:100%;height:320px;margin:0 auto;overflow:hidden;}
  .carousel-wrapper{position:relative;z-index:1;margin:0;padding:0;list-style:none;}
  .carousel-pagination{position:absolute;bottom:20px;left:50%;z-index:2;height:12px;line-height:12px;padding:4px 8px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);background-color:hsla(39,100%,10%,.3);border-radius:12px;white-space:nowrap;}
  .carousel-pagination span{display:inline-block;width:12px;height:12px;margin:0 6px;border-radius:100%;background-color:hsla(39,100%,100%,.95);cursor:pointer;}
  .carousel-pagination span.active{background-color:hsla(39,100%,10%,.95);}
  .carousel-arrow{position:absolute;top:50%;z-index:2;margin-top:-30px;width:34px;height:60px;text-align:center;line-height:60px;color:#fff;text-decoration:none;background-color:rgba(0,0,0,.3);}
  .carousel-arrow:hover{background-color:rgba(0,0,0,.6);}
  .carousel-prev{left:0;background-position:0 17px;}
  .carousel-next{right:0;background-position:right 17px;}
</style>

初始化galaxy

<script>
  new galaxy.Carousel('#usageDemo', {
    effect: 'slide',
    resize: true,
    wrapper: '.carousel-wrapper',
    navigation: {
      prevEl: '.carousel-prev',
      nextEl: '.carousel-next'
    },
    pagination: {
      el: '.carousel-pagination',
      bulletActiveClass: 'active'
    }
  });      
</script>

完成。

基础演示

轮播图 - 淡入淡出

演示代码

<div class="carousel" id="carouselFade">
  <ul class="carousel-wrapper">
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a01.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a02.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a03.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a04.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a05.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a06.jpg" /></a></li>
  </ul>
  <div class="carousel-pagination"></div>
  <a href="javascript:;" class="carousel-arrow carousel-prev"></a>
  <a href="javascript:;" class="carousel-arrow carousel-next"></a>
</div>
<script>
  new galaxy.Carousel('#carouselFade', {
    effect: 'fade',
    resize: true,
    wrapper: '.carousel-wrapper',
    navigation: {
      prevEl: '.carousel-prev',
      nextEl: '.carousel-next'
    },
    pagination: {
      el: '.carousel-pagination',
      bulletActiveClass: 'active'
    }
  });
</script>

轮播图 - 滑动

演示代码

<div class="carousel" id="carouselSlide">
  <ul class="carousel-wrapper">
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a01.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a02.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a03.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a04.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a05.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a06.jpg" /></a></li>
  </ul>
  <div class="carousel-pagination"></div>
  <a href="javascript:;" class="carousel-arrow carousel-prev"></a>
  <a href="javascript:;" class="carousel-arrow carousel-next"></a>
</div>
<script>
  new galaxy.Carousel('#carouselSlide', {
    effect: 'slide',
    resize: true,
    wrapper: '.carousel-wrapper',
    navigation: {
      prevEl: '.carousel-prev',
      nextEl: '.carousel-next'
    },
    pagination: {
      el: '.carousel-pagination',
      bulletActiveClass: 'active'
    }
  });
</script>

轮播图 - 循环滑动

演示代码

<div class="carousel" id="carouselSlideLoop">
  <ul class="carousel-wrapper">
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a01.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a02.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a03.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a04.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a05.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a06.jpg" /></a></li>
  </ul>
  <div class="carousel-pagination"></div>
  <a href="javascript:;" class="carousel-arrow carousel-prev"></a>
  <a href="javascript:;" class="carousel-arrow carousel-next"></a>
</div>
<script>
  new galaxy.Carousel('#carouselSlideLoop', {
    effect: 'slide',
    effectSlide: {
      loop: true,
    },
    resize: true,
    wrapper: '.carousel-wrapper',
    navigation: {
      prevEl: '.carousel-prev',
      nextEl: '.carousel-next'
    },
    pagination: {
      el: '.carousel-pagination',
      bulletActiveClass: 'active'
    }
  });
</script>

轮播图 - 垂直滑动

演示代码

<div class="carousel" id="carouselSlideVertical">
  <ul class="carousel-wrapper">
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a01.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a02.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a03.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a04.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a05.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a06.jpg" /></a></li>
  </ul>
  <div class="carousel-pagination"></div>
  <a href="javascript:;" class="carousel-arrow carousel-prev"></a>
  <a href="javascript:;" class="carousel-arrow carousel-next"></a>
</div>
<script>
  new galaxy.Carousel('#carouselSlideVertical', {
    effect: 'slide',
    direction: 'vertical',
    resize: true,
    wrapper: '.carousel-wrapper',
    navigation: {
      prevEl: '.carousel-prev',
      nextEl: '.carousel-next'
    },
    pagination: {
      el: '.carousel-pagination',
      bulletActiveClass: 'active'
    }
  });
</script>

轮播图 - 堆叠

演示代码

<div class="carousel carousel-stack" id="carouselStack">
  <ul class="carousel-wrapper">
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a01.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a02.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a03.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a04.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a05.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a06.jpg" /></a></li>
  </ul>
  <div class="carousel-pagination"></div>
  <a href="javascript:;" class="carousel-arrow carousel-prev"></a>
  <a href="javascript:;" class="carousel-arrow carousel-next"></a>
</div>
<script>
  (function () {
    var carouselStackIns = new galaxy.Carousel('#carouselStack', {
      effect: 'stack',
      effectStack: {
        layer: 3
      },
      resize: true,
      wrapper: '.carousel-wrapper',
      navigation: {
        prevEl: '.carousel-prev',
        nextEl: '.carousel-next'
      },
      pagination: {
        el: '.carousel-pagination',
        bulletActiveClass: 'active'
      }
    });

    var breakpoint = false;
    function breakpointChange(fn) {
      var isSmall = window.innerWidth <= 768;
      if (isSmall && breakpoint !== -1) {
        breakpoint = -1;
        fn(-1);
      }
      if (!isSmall && breakpoint !== 1) {
        breakpoint = 1;
        fn(1);
      }
    }
    
    function handler() {
      breakpointChange(function (breakpoint) {
        carouselStackIns.destroy();
        carouselStackIns.params.effectStack.layer = breakpoint < 0 ? 2 : 3;
        carouselStackIns.init();
      });
    }
    window.addEventListener('resize', handler);
    handler();
  })();
</script>

轮播图 - 垂直堆叠

演示代码

<div class="carousel carousel-stack carousel-stack-vertical" id="carouselStackVertical">
  <ul class="carousel-wrapper">
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a01.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a02.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a03.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a04.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a05.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a06.jpg" /></a></li>
  </ul>
  <div class="carousel-pagination"></div>
  <a href="javascript:;" class="carousel-arrow carousel-prev"></a>
  <a href="javascript:;" class="carousel-arrow carousel-next"></a>
</div>
<script>
  new galaxy.Carousel('#carouselStackVertical', {
    effect: 'stack',
    effectStack: {
      layer: 2,
      changeZIndex: 'before'
    },
    duration: 400,
    resize: true,
    direction: 'vertical',
    wrapper: '.carousel-wrapper',
    navigation: {
      prevEl: '.carousel-prev',
      nextEl: '.carousel-next'
    },
    pagination: {
      el: '.carousel-pagination',
      bulletActiveClass: 'active'
    }
  });
</script>

轮播图 - 牌组 - 抽取

演示代码

<div class="carousel" id="carouselDeck">
  <ul class="carousel-wrapper">
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a01.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a02.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a03.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a04.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a05.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a06.jpg" /></a></li>
  </ul>
  <div class="carousel-pagination"></div>
  <a href="javascript:;" class="carousel-arrow carousel-prev"></a>
  <a href="javascript:;" class="carousel-arrow carousel-next"></a>
</div>
<script>
  new galaxy.Carousel('#carouselDeck', {
    effect: 'deck',
    resize: true,
    wrapper: '.carousel-wrapper',
    navigation: {
      prevEl: '.carousel-prev',
      nextEl: '.carousel-next'
    },
    pagination: {
      el: '.carousel-pagination',
      bulletActiveClass: 'active'
    }
  });
</script>

轮播图 - 牌组 - 覆盖

演示代码

<div class="carousel" id="carouselDeckCover">
  <ul class="carousel-wrapper">
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a01.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a02.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a03.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a04.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a05.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a06.jpg" /></a></li>
  </ul>
  <div class="carousel-pagination"></div>
  <a href="javascript:;" class="carousel-arrow carousel-prev"></a>
  <a href="javascript:;" class="carousel-arrow carousel-next"></a>
</div>
<script>
  new galaxy.Carousel('#carouselDeckCover', {
    effect: 'deck',
    effectDeck: {
      type: 'cover'
    },
    resize: true,
    wrapper: '.carousel-wrapper',
    navigation: {
      prevEl: '.carousel-prev',
      nextEl: '.carousel-next'
    },
    pagination: {
      el: '.carousel-pagination',
      bulletActiveClass: 'active'
    }
  });
</script>

轮播图 - 垂直牌组

演示代码

<div class="carousel" id="carouselDeckVertical">
  <ul class="carousel-wrapper">
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a01.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a02.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a03.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a04.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a05.jpg" /></a></li>
    <li class="carousel-slide"><a href="javascript:;"><img src="./assets/img/a06.jpg" /></a></li>
  </ul>
  <div class="carousel-pagination"></div>
  <a href="javascript:;" class="carousel-arrow carousel-prev"></a>
  <a href="javascript:;" class="carousel-arrow carousel-next"></a>
</div>
<script>
  new galaxy.Carousel('#carouselDeckVertical', {
    effect: 'deck',
    effectDeck: {
      type: 'draw',
      prevEasing: null,
      nextEasing: 'easeOutBounce',
      prevDuration: null,
      nextDuration: 2000
    },
    resize: true,
    direction: 'vertical',
    wrapper: '.carousel-wrapper',
    navigation: {
      prevEl: '.carousel-prev',
      nextEl: '.carousel-next'
    },
    pagination: {
      el: '.carousel-pagination',
      bulletActiveClass: 'active'
    }
  });
</script>

手风琴

演示代码

白胡子

爱德华·纽盖特，享年72岁。外号“白胡子”，被称为世界最强的男人”，悬赏金50亿4600万贝里。能力是震震果实，武器为最上大业物12工之一“丛云切”。他是旧时代传说海贼之一，原洛克斯海贼团船员，与前海贼王哥尔·D·罗杰齐名，是罗杰死后的无冕之王，2年前战死于顶上战争。

红发

香克斯，39岁。外号“红发”，红发海贼团头目，悬赏金40亿4890万贝里。没有食用恶魔果实，以霸气和剑术战斗，武器为“格里芬”。过去是罗杰海贼团见习船员。

百兽

凯多，年龄不详。外号“百兽”，百兽海贼团总督，悬赏金46亿1110万贝里。鱼鱼果实·幻兽种·青龙形态能力者，能够化身为青龙。人称“最强的生物”，以强硬体质和不死传说闻名。过去是洛克斯海贼团见习船员。

BIG MOM

夏洛特·玲玲，68岁。外号“BIG·MOM”，BIG·MOM海贼团船长，悬赏金43亿8800万贝里。魂魂果实能力者。过去是洛克斯海贼团船员。

黑胡子

马歇尔·D·蒂奇，40岁。外号“黑胡子”，黑胡子海贼团提督，悬赏金22亿4760万贝里。暗暗果实以及震震果实的双果实能力者。过去是白胡子海贼团第2队队员，2年前加入七武海释放监狱犯人并收为部下，1年前打败马尔高带领的白胡子残党，取代白胡子并被称为新任四皇之一。

<div class="accordion" id="accordion">
  <div class="accordion-item">
    <div class="accordion-header"><span class="arrow"></span> 白胡子</div>
    <div class="accordion-content">
      爱德华·纽盖特，享年72岁。外号“白胡子”，被称为世界最强的男人”，悬赏金50亿4600万贝里。能力是震震果实，武器为最上大业物12工之一“丛云切”。他是旧时代传说海贼之一，原洛克斯海贼团船员，与前海贼王哥尔·D·罗杰齐名，是罗杰死后的无冕之王，2年前战死于顶上战争。
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header"><span class="arrow"></span> 红发</div>
    <div class="accordion-content">
      香克斯，39岁。外号“红发”，红发海贼团头目，悬赏金40亿4890万贝里。没有食用恶魔果实，以霸气和剑术战斗，武器为“格里芬”。过去是罗杰海贼团见习船员。
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header"><span class="arrow"></span> 百兽</div>
    <div class="accordion-content">
      凯多，年龄不详。外号“百兽”，百兽海贼团总督，悬赏金46亿1110万贝里。鱼鱼果实·幻兽种·青龙形态能力者，能够化身为青龙。人称“最强的生物”，以强硬体质和不死传说闻名。过去是洛克斯海贼团见习船员。
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header"><span class="arrow"></span> BIG MOM</div>
    <div class="accordion-content">
      夏洛特·玲玲，68岁。外号“BIG·MOM”，BIG·MOM海贼团船长，悬赏金43亿8800万贝里。魂魂果实能力者。过去是洛克斯海贼团船员。
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header"><span class="arrow"></span> 黑胡子</div>
    <div class="accordion-content">
      马歇尔·D·蒂奇，40岁。外号“黑胡子”，黑胡子海贼团提督，悬赏金22亿4760万贝里。暗暗果实以及震震果实的双果实能力者。过去是白胡子海贼团第2队队员，2年前加入七武海释放监狱犯人并收为部下，1年前打败马尔高带领的白胡子残党，取代白胡子并被称为新任四皇之一。
    </div>
  </div>
</div>
<script>
  new galaxy.Accordion('#accordion', {
    labels: '.accordion-header',
    panels: '.accordion-content',
    atLeastOne: false
  });
</script>

选项卡/标签页

演示代码

黄猿

藤虎

绿牛

青雉

赤犬

泽法

战国

空

波鲁萨利诺。简介：现任海军本部大将，自然系闪光果实能力者。拥有强大的剑术和踢技以及射击能力。刚加入海军之时，就已实力高强，被称为怪物。性格：外柔内刚，做事不认真。战斗时喜欢调侃对手，见到谁都说“好可怕啊，还经常故意做出示弱的样子，但其实并不把对手当回事。正义观：模棱两可的正义

一生。简介：现任海军本部大将，超人系重力果实能力者。两年间通过世界征兵选取的新人大将，被称为强的没边的怪物。性格：非常和气，即使是对敌人，也一样用敬称。是非分明，欣赏具有正义感的人。正义观：仁义的正义

真名未知。简介：现任海军本部大将。两年间通过世界征兵选取的新人大将，被称为强的没边的怪物。

库赞。两年前曾任海军本部大将，之后退出海军。自然系冰冻果实能力者。正义观：悠闲的正义

萨卡斯基。两年前曾任海军本部大将，之后升任海军本部元帅。自然系岩浆果实能力者。正义观：彻底的正义

人称“黑腕”泽法、“不杀”大将、“Z”。十多年前曾任海军本部大将，之后退出海军，自己建立了NEO海军。

人称“佛之战国”、“智将”战国，十多年前曾任海军本部大将，之后升任海军本部元帅，现退位为海军本部大督查。动物系幻兽种人人果实大佛形态能力者。正义观：君临天下的正义

人称“钢骨”空，数十年前曾任海军本部大将，之后升任海军本部元帅，现任世界政府全军总帅。

<div class="tabs" id="tabs">
  <div class="tabs-header">
    <div class="tabs-label">黄猿</div>
    <div class="tabs-label">藤虎</div>
    <div class="tabs-label">绿牛</div>
    <div class="tabs-label">青雉</div>
    <div class="tabs-label">赤犬</div>
    <div class="tabs-label">泽法</div>
    <div class="tabs-label">战国</div>
    <div class="tabs-label">空</div>
  </div>
  <div class="tabs-body">
    <div class="tabs-panel">
      波鲁萨利诺。
      简介：现任海军本部大将，自然系闪光果实能力者。拥有强大的剑术和踢技以及射击能力。刚加入海军之时，就已实力高强，被称为怪物。
      性格：外柔内刚，做事不认真。战斗时喜欢调侃对手，见到谁都说“好可怕啊，还经常故意做出示弱的样子，但其实并不把对手当回事。
      正义观：模棱两可的正义
    </div>
    <div class="tabs-panel">
      一生。
      简介：现任海军本部大将，超人系重力果实能力者。两年间通过世界征兵选取的新人大将，被称为强的没边的怪物。
      性格：非常和气，即使是对敌人，也一样用敬称。是非分明，欣赏具有正义感的人。
      正义观：仁义的正义
    </div>
    <div class="tabs-panel">
      真名未知。
      简介：现任海军本部大将。两年间通过世界征兵选取的新人大将，被称为强的没边的怪物。
    </div>
    <div class="tabs-panel">
      库赞。
      两年前曾任海军本部大将，之后退出海军。自然系冰冻果实能力者。
      正义观：悠闲的正义
    </div>
    <div class="tabs-panel">
      萨卡斯基。
      两年前曾任海军本部大将，之后升任海军本部元帅。自然系岩浆果实能力者。
      正义观：彻底的正义
    </div>
    <div class="tabs-panel">
      人称“黑腕”泽法、“不杀”大将、“Z”。十多年前曾任海军本部大将，之后退出海军，自己建立了NEO海军。
    </div>
    <div class="tabs-panel">
      人称“佛之战国”、“智将”战国，十多年前曾任海军本部大将，之后升任海军本部元帅，现退位为海军本部大督查。动物系幻兽种人人果实大佛形态能力者。
      正义观：君临天下的正义
    </div>
    <div class="tabs-panel">
      人称“钢骨”空，数十年前曾任海军本部大将，之后升任海军本部元帅，现任世界政府全军总帅。
    </div>
  </div>
</div>
<script>
  new galaxy.Tabs('#tabs', {
    labels: '.tabs-label',
    panels: '.tabs-panel',
    triggerType: 'mouseenter'
  });
</script>

菜单 - 淡入淡出

演示代码

<div class="menu" id="menuFade">
  <div class="menu-item">
    <span class="menu-link">三大灾害 <span class="arrow"></span></span>
    <div class="submenu">
      <a href="javascript:;" class="submenu-item">炎灾·烬</a>
      <a href="javascript:;" class="submenu-item">疫灾·奎因</a>
      <a href="javascript:;" class="submenu-item">旱灾·杰克</a>
    </div>
  </div>
  <div class="menu-item active">
    <span class="menu-link">世界政府三大机构 <span class="arrow"></span></span>
    <div class="submenu">
      <a href="javascript:;" class="submenu-item">司法岛艾尼艾斯大厅</a>
      <a href="javascript:;" class="submenu-item">海军本部</a>
      <a href="javascript:;" class="submenu-item">推进城因佩尔大监狱</a>
    </div>
  </div>
  <div class="menu-item">
    <span class="menu-link">古代兵器 <span class="arrow"></span></span>
    <div class="submenu">
      <a href="javascript:;" class="submenu-item">冥王（布鲁托）</a>
      <a href="javascript:;" class="submenu-item">海王（波塞冬</a>
      <a href="javascript:;" class="submenu-item">天王（乌拉诺斯）</a>
    </div>
  </div>
  <div class="menu-item">
    <a href="javascript:;" class="menu-link">伊姆</a>
  </div>
</div>
<script>
  new galaxy.Menu('#menuFade', {
    menuItems: '.menu-item',
    subMenu: '.submenu',
    activeClass: 'active',
    effect: 'fade',
    duration: 300,
    hideDelay: 50,
    showDelay: 50,
    easing: 'linear'
  });
</script>

菜单 - 滑动

演示代码

<div class="menu" id="menuSlide">
  <div class="menu-item">
    <span class="menu-link">三大灾害 <span class="arrow"></span></span>
    <div class="submenu">
      <a href="javascript:;" class="submenu-item">炎灾·烬</a>
      <a href="javascript:;" class="submenu-item">疫灾·奎因</a>
      <a href="javascript:;" class="submenu-item">旱灾·杰克</a>
    </div>
  </div>
  <div class="menu-item active">
    <span class="menu-link">世界政府三大机构 <span class="arrow"></span></span>
    <div class="submenu">
      <a href="javascript:;" class="submenu-item">司法岛艾尼艾斯大厅</a>
      <a href="javascript:;" class="submenu-item">海军本部</a>
      <a href="javascript:;" class="submenu-item">推进城因佩尔大监狱</a>
    </div>
  </div>
  <div class="menu-item">
    <span class="menu-link">古代兵器 <span class="arrow"></span></span>
    <div class="submenu">
      <a href="javascript:;" class="submenu-item">冥王（布鲁托）</a>
      <a href="javascript:;" class="submenu-item">海王（波塞冬</a>
      <a href="javascript:;" class="submenu-item">天王（乌拉诺斯）</a>
    </div>
  </div>
  <div class="menu-item">
    <a href="javascript:;" class="menu-link">伊姆</a>
  </div>
</div>
<script>
  new galaxy.Menu('#menuSlide', {
    menuItems: '.menu-item',
    subMenu: '.submenu',
    activeClass: 'active',
    effect: 'slide',
    duration: 300,
    hideDelay: 50,
    showDelay: 50,
    easing: 'linear'
  });
</script>

跑马灯 - 垂直

演示代码

白胡子海贼团队长

第1番队队长 - “不死鸟”马尔科
第2番队队长（原） - 光月御田
第2番队队长 - “火拳”波特卡斯·D·艾斯
第3番队队长 - “钻石”乔兹
第4番队队长 - 萨奇
第5番队队长 - “花剑”比斯塔
第6番队队长 - 布拉曼克
第7番队队长 - 拉克约
第8番队队长 - 那谬尔
第9番队队长 - 布伦海姆
第10番队队长 - 库利艾尔
第11番队队长 - 金古多
第12番队队长 - 哈尔塔
第13番队队长 - “水牛”阿特摩斯
第14番队队长 - 斯比多·基尔
第15番队队长 - 佛萨
第16番队队长 - 以藏

<div class="marquee" id="marquee">
  <div class="marquee-header">
    <div class="marquee-title">白胡子海贼团队长</div>
    <div class="marquee-header-extra">
      <a href="javascript:;" class="marquee-prev"><span class="arrow"></span></a>
      <a href="javascript:;" class="marquee-next"><span class="arrow"></span></a>
    </div>
  </div>
  <div class="marquee-body">
    <ul class="marquee-content">
      <li>第1番队队长 - “不死鸟”马尔科</li>
      <li>第2番队队长（原） - 光月御田</li>
      <li>第2番队队长 - “火拳”波特卡斯·D·艾斯</li>
      <li>第3番队队长 - “钻石”乔兹</li>
      <li>第4番队队长 - 萨奇</li>
      <li>第5番队队长 - “花剑”比斯塔</li>
      <li>第6番队队长 - 布拉曼克</li>
      <li>第7番队队长 - 拉克约</li>
      <li>第8番队队长 - 那谬尔</li>
      <li>第9番队队长 - 布伦海姆</li>
      <li>第10番队队长 - 库利艾尔</li>
      <li>第11番队队长 - 金古多</li>
      <li>第12番队队长 - 哈尔塔</li>
      <li>第13番队队长 - “水牛”阿特摩斯</li>
      <li>第14番队队长 - 斯比多·基尔</li>
      <li>第15番队队长 - 佛萨</li>
      <li>第16番队队长 - 以藏</li>
    </ul>
  </div>
</div>
<script>
  new galaxy.Marquee('#marquee', {
    wrapper: '.marquee-body ul',
    navigation: {
      prevEl: '.marquee-prev',
      nextEl: '.marquee-next'
    }
  });
</script>

跑马灯 - 水平

演示代码

白胡子海贼团队长

第1番队队长 - “不死鸟”马尔科
第2番队队长（原） - 光月御田
第2番队队长 - “火拳”波特卡斯·D·艾斯
第3番队队长 - “钻石”乔兹
第4番队队长 - 萨奇
第5番队队长 - “花剑”比斯塔
第6番队队长 - 布拉曼克
第7番队队长 - 拉克约
第8番队队长 - 那谬尔
第9番队队长 - 布伦海姆
第10番队队长 - 库利艾尔
第11番队队长 - 金古多
第12番队队长 - 哈尔塔
第13番队队长 - “水牛”阿特摩斯
第14番队队长 - 斯比多·基尔
第15番队队长 - 佛萨
第16番队队长 - 以藏

<div class="marquee marquee-horizontal" id="marqueeHorizontal">
  <div class="marquee-header">
    <div class="marquee-title">白胡子海贼团队长</div>
    <div class="marquee-header-extra">
      <a href="javascript:;" class="marquee-prev"><span class="arrow"></span></a>
      <a href="javascript:;" class="marquee-next"><span class="arrow"></span></a>
    </div>
  </div>
  <div class="marquee-body">
    <ul class="marquee-content">
      <li>第1番队队长 - “不死鸟”马尔科</li>
      <li>第2番队队长（原） - 光月御田</li>
      <li>第2番队队长 - “火拳”波特卡斯·D·艾斯</li>
      <li>第3番队队长 - “钻石”乔兹</li>
      <li>第4番队队长 - 萨奇</li>
      <li>第5番队队长 - “花剑”比斯塔</li>
      <li>第6番队队长 - 布拉曼克</li>
      <li>第7番队队长 - 拉克约</li>
      <li>第8番队队长 - 那谬尔</li>
      <li>第9番队队长 - 布伦海姆</li>
      <li>第10番队队长 - 库利艾尔</li>
      <li>第11番队队长 - 金古多</li>
      <li>第12番队队长 - 哈尔塔</li>
      <li>第13番队队长 - “水牛”阿特摩斯</li>
      <li>第14番队队长 - 斯比多·基尔</li>
      <li>第15番队队长 - 佛萨</li>
      <li>第16番队队长 - 以藏</li>
    </ul>
  </div>
</div>
<script>
  new galaxy.Marquee('#marqueeHorizontal', {
    wrapper: '.marquee-body ul',
    direction: 'horizontal',
    navigation: {
      prevEl: '.marquee-prev',
      nextEl: '.marquee-next'
    }
  });
</script>

滚动监听 + 滚动固定

演示代码

赤犬青雉黄猿

海军三大将

海军大将为海军本部的最高战力，因此对担任者的第一个要求就是“实力”，如果没有合适的人选，则会空着位置。

海军大将持有“金色电话虫”，拥有随时发动“屠魔令”的权利。可摧毁任意地点，无需向上级通知，即使是世界政府三大机构之一的司法岛也不例外。

海军大将不轻易出动，但是世界贵族天龙人可直接调动海军大将做事，正因如此，得罪天龙人是人尽皆知的大忌。

赤犬 - 萨卡斯基

萨卡斯基，海军本部元帅。海军代号“赤犬”，原“三大将”之一。自然系。浆果实能力者。刚加入海军之时，就被称为“怪物”。是原海军大将“黑腕”泽法的学生。

赤犬奉行“彻底的正义”。性格刚直，手段残酷不留一切情面，绝不允许一丝“恶”的存在。为了能完成任务，可以毫不在乎的将同僚和一般民众都当成目标歼灭。奥哈拉事件中，他以可能窝藏考古学家为由，命令部下炸毁载满了奥哈拉居民的避难船。顶上战争中，他也亲自处决了因为害怕战死而打算逃走的海军士兵。赤犬极其注意维护海军的威严，是一个铁血军人。

萨卡斯基的样貌是参考日本艺人菅原文太。 [3] 原作者尾田荣一郎曾在与中田康孝访谈中表示过内段时间内最崇拜的偶像就是菅原文太，并称其为”世界第一男子汉“。

青雉 - 库赞

库赞，海军代号“青雉”，两年前“三大将”之一，自然系冰冻果实能力者，实力强大，是原海军大将黑腕泽法的学生。后与黄猿、赤犬，并称为“海军三大将”。后与赤犬争夺元帅大战十天败北，后选择退出海军，并且与黑胡子海贼团有密切联系。

长时间的苦恼使他决心支持“懒散的正义”，他认为“正义”在不同立场的人们身上会有不同见解，并会随立场而改变，所以不会去质疑其他人的“正义”；但当他人要妨碍自己的正义时，就绝对不会放过对方。性格懒散。但一直保持着冷静的心态。讲礼貌，见到草帽一伙的时候，都是礼貌待人，不是一见面就刀兵相见；重情义，初次与路飞交手的时候，念在卡普对他有恩的份上，放过了路飞。

青雉的原型是参考自日本已故男星松田优作；松田优作以在电视剧《大都会 PARTII》饰演刑警而知名，另《探侦物语》亦为其代表作品。此外，青雉的生日9月21日亦是参照松田的真实生日日期所设定。

黄猿 - 波鲁萨利诺

两年前以及两年后的“三大将”之一，自然系闪闪果实能力者，拥有强大的剑术和踢技以及射击能力。刚加入海军之时，就已实力高强，被称为怪物。是原海军本部大将黑腕泽法的学生。负责统帅战桃丸率领的海军科学部队。2年前在香波地群岛以压倒性力量秒杀四名超新星。现与绿牛、藤虎，并称为新的三大将。

秉承着“模棱两可的正义”。认为“海贼的罪行都是无法消去的”。战斗时喜欢调侃对手，特别喜欢说“好可怕啊”，面对大部分敌人经常做出示弱的样子。说话方式非常缓慢。常常错用不能对话的窃听用的黑色电话虫。

黄猿的形象原型为日本演员田中邦卫。被誉为日本最伟大的配角演员之一。

<div class="scrollspy" id="scrollSpy">
  <div class="scrollspy-header" id="scrollFixed">
    <div class="scrollspy-nav">
      <a class="scrollspy-nav-item" href="#scrollspy-target1">赤犬</a>
      <a class="scrollspy-nav-item" href="#scrollspy-target2">青雉</a>
      <a class="scrollspy-nav-item" href="#scrollspy-target3">黄猿</a>
    </div>
  </div>
  <div class="scrollspy-body">
    <h4 class="scrollspy-title">海军三大将</h4>
    <div class="scrollspy-img" style="float: right;">
      <img src="./assets/img/sdj.jpg" alt="">
    </div>
    <p>海军大将为海军本部的最高战力，因此对担任者的第一个要求就是“实力”，如果没有合适的人选，则会空着位置。</p>
    <p>海军大将持有“金色电话虫”，拥有随时发动“屠魔令”的权利。可摧毁任意地点，无需向上级通知，即使是世界政府三大机构之一的司法岛也不例外。</p>
    <p>海军大将不轻易出动，但是世界贵族天龙人可直接调动海军大将做事，正因如此，得罪天龙人是人尽皆知的大忌。</p>
    <div class="scrollspy-panel">
      <h5 class="scrollspy-panel-header" id="scrollspy-target1">赤犬 - 萨卡斯基</h5>
      <div class="scrollspy-panel-body">
        <p>萨卡斯基，海军本部元帅。海军代号“赤犬”，原“三大将”之一。自然系。浆果实能力者。刚加入海军之时，就被称为“怪物”。是原海军大将“黑腕”泽法的学生。</p>
        <p>
          赤犬奉行“彻底的正义”。性格刚直，手段残酷不留一切情面，绝不允许一丝“恶”的存在。为了能完成任务，可以毫不在乎的将同僚和一般民众都当成目标歼灭。奥哈拉事件中，他以可能窝藏考古学家为由，命令部下炸毁载满了奥哈拉居民的避难船。顶上战争中，他也亲自处决了因为害怕战死而打算逃走的海军士兵。赤犬极其注意维护海军的威严，是一个铁血军人。
        </p>
        <p>
          萨卡斯基的样貌是参考日本艺人菅原文太。 [3]  原作者尾田荣一郎曾在与中田康孝访谈中表示过内段时间内最崇拜的偶像就是菅原文太，并称其为”世界第一男子汉“。
        </p>
      </div>
    </div>
    <div class="scrollspy-panel">
      <h5 class="scrollspy-panel-header" id="scrollspy-target2">青雉 - 库赞</h5>
      <div class="scrollspy-panel-body">
        <p>
          库赞，海军代号“青雉”，两年前“三大将”之一，自然系冰冻果实能力者，实力强大，是原海军大将黑腕泽法的学生。后与黄猿、赤犬，并称为“海军三大将”。后与赤犬争夺元帅大战十天败北，后选择退出海军，并且与黑胡子海贼团有密切联系。
        </p>
        <p>
          长时间的苦恼使他决心支持“懒散的正义”，他认为“正义”在不同立场的人们身上会有不同见解，并会随立场而改变，所以不会去质疑其他人的“正义”；但当他人要妨碍自己的正义时，就绝对不会放过对方。 性格懒散。但一直保持着冷静的心态。 讲礼貌，见到草帽一伙的时候，都是礼貌待人，不是一见面就刀兵相见；重情义，初次与路飞交手的时候，念在卡普对他有恩的份上，放过了路飞。
        </p>
        <p>青雉的原型是参考自日本已故男星松田优作；松田优作以在电视剧《大都会 PARTII》饰演刑警而知名，另《探侦物语》亦为其代表作品。此外，青雉的生日9月21日亦是参照松田的真实生日日期所设定。</p>
      </div>
    </div>
    <div class="scrollspy-panel">
      <h5 class="scrollspy-panel-header" id="scrollspy-target3">黄猿 - 波鲁萨利诺</h5>
      <div class="scrollspy-panel-body">
        <p>
          两年前以及两年后的“三大将”之一，自然系闪闪果实能力者，拥有强大的剑术和踢技以及射击能力。刚加入海军之时，就已实力高强，被称为怪物。是原海军本部大将黑腕泽法的学生。负责统帅战桃丸率领的海军科学部队。2年前在香波地群岛以压倒性力量秒杀四名超新星。现与绿牛、藤虎，并称为新的三大将。
        </p>
        <p>秉承着“模棱两可的正义”。认为“海贼的罪行都是无法消去的”。战斗时喜欢调侃对手，特别喜欢说“好可怕啊”，面对大部分敌人经常做出示弱的样子。说话方式非常缓慢。常常错用不能对话的窃听用的黑色电话虫。</p>
        <p>黄猿的形象原型为日本演员田中邦卫。被誉为日本最伟大的配角演员之一。</p>
      </div>
    </div>
  </div>
</div>
<script>
  new galaxy.ScrollSpy('#scrollSpy', {
    labels: '.scrollspy-nav-item',
    activeClass: 'active',
    // scrollBox: '.scrollspy-body'
  });
  new galaxy.ScrollFixed('#scrollFixed', {
    fixedBox: '.scrollspy-nav',
    offsetTop: 42
  });

  // 当滚动超过scrollSpy盒子时取消固定，避免遮挡其下内容
  (function() {
    var utils = galaxy.utils;
    var scrollSpy = utils.$('#scrollSpy');
    var scrollFixed = utils.$('#scrollFixed');
    var child = scrollFixed.firstElementChild;

    function scrollHandler() {
      if (scrollSpy.getBoundingClientRect().bottom <= 0) {
        utils.addClass(child, 'overdo');
      } else {
        utils.removeClass(child, 'overdo');
      }
    }
    scrollHandler();
    utils.on(window, 'scroll', utils.throttle(scrollHandler, 100));
  })();
</script>

回到页面顶部

演示代码

效果请看页面右下角回到顶部按钮。

效果请看页面右下角回到顶部按钮。
<div class="gototop" id="gotoTop">
  <div class="arrow"></div>
</div>
<script>
  new galaxy.GotoTop('#gotoTop', {
    // duration: 2000,
    // fadeDuration: 600
  });
</script>

接口文档

Carousel

配置选项

参数	默认值	说明
init	true	实例化后是否立即初始化
wrapper	".galaxy-wrapper"	包裹容器
slideList	null	默认获取wrapper的子元素作为滑块，如果滑块同级有其他元素，可直接指定滑块
effect	"fade"	滑块切换效果，可选：'fade', 'slide', 'deck'
instant	true	切换时，如果上一个动画还没有过渡完，立即完成上一次动画并开始新的动画。
resize	false	改变窗口大小时是否重新调整元素的尺寸
duration	500	滑块切换持续时间，单位毫秒
easing	"easeInOutQuad"	缓动公式
direction	"horizontal"	滑块切换的轴线，可选：'horizontal', 'vertical'
activeClass	"galaxy-slide-active"	当前活动滑块添加的类名
navigation {		前后按钮导航
prevEl	null	上一个按钮元素或选择器
nextEl	null	下一个按钮元素或选择器
triggerType	"click"	按钮触发滑块切换的事件类型，可选：'click', 'mousedown', 'mouseup'等鼠标事件
triggerDelay	150	当triggerType为'mouseover'或'mouseenter'时，未避免不小心滑动导致频繁切换的延迟时间
disabledIfEdge	false	到达边缘是否禁止切换
disabledClass	"galaxy-button-disabled"	disabledIfEdge为true情况下，到达边缘时添加的类名
disabledClass	"galaxy-button-disabled"	disabledIfEdge为true情况下，到达边缘时添加的类名
}
pagination {		分页
type	"bullets"	分页类型，可选：'bullets', 'fraction', 'custom'
triggerType	"click"	bullets触发滑块切换的事件类型，可选：'click', 'mouseover', 'mouseenter', 'mousedown', 'mouseup'等鼠标事件，也可传入false来不让bullets控制切换滑块
triggerDelay	150	当triggerType为mouseover'或'mouseenter'时，未避免不小心滑动导致频繁切换的延迟时间
autoPaging	true	是否自动分页，如果基于现有的DOM作为分页项，可设为false，并使用el选项指定分页项。
bulletEl	null	用于非自动分页指定bullets元素
renderBullets	function(index, bulletClass) { return ''; }	自定义bullets的渲染
renderFraction	function(currentClass, totalClass) { return ' / '; }	自定义bullets的渲染
自定义fraction的渲染	function(host, current, total) { return current + ' / ' + total; }	自定义渲染
bulletClass	"galaxy-pagination-bullet"	bullet类名
bulletActiveClass	"galaxy-pagination-bullet-active"	活动的bullet类名
currentClass	"galaxy-pagination-current"	fraction类型下current类名
totalClass	"galaxy-pagination-total"	fraction类型下total类名
}
autoplay {		自动播放
enabled	false	是否启用
delay	3000	切换到下一滑块的间隔时间
progress	null	可配置一个接收delay进度的函数
interval	16.667	触发progress函数的时间间隔
hoverPause	true	鼠标移上el是否暂停自动播放
}
effectFade {		淡入淡出效果
fadeInDuration	null	淡入的时间，默认为duration
fadeOutDuration	null	淡出的时间，默认为duration
}
effectSlide {		滑动效果
loop	false	是否循环切换
visibleSlides	1	可视滑块个数
scrolledSlides	1	每次滚动的滑块数，不大于可视滑块数
clonedSlides	0	前后克隆的滑块数，默认和可视滑块数相同，不可小于可视滑块数
slideIndexAttrName	"data-galaxy-slide-index"	滑块下标值对应的元素属性名，用于loop模式下
clonedSlideClass	"galaxy-cloned-slide"	克隆滑块的类名，用于loop模式下
}
effectStack {		堆叠效果
loop	false	是否循环切换
layer	2	堆叠的层数，最少两层
scale	-0.12	逐层缩小比率
scaleEasing	"linear"	缩放交错动画的滑动公式
changeZIndex	"after"	在动画开始之前或动画结束之后改变层级，可选: 'before', 'after'
focusWidth	null	焦点滑块的宽度
focusHeight	null	焦点滑块的高度
align	"center"	层的对齐方式，可选：'start', 'center', 'end'
visibleSlideIndexAttrName	"data-visible-slide-index"	保存滑块下标属性的键名，左边隐藏的滑块对应值都为0，从左往右可见滑块值递增，右边隐藏滑块值都为可见滑块数加1
slideIndexAttrName	"data-galaxy-slide-index"	滑块下标值对应的元素属性名，用于loop模式下
clonedSlideClass	"galaxy-cloned-slide"	克隆滑块的类名，用于loop模式下
switchBySlide	true	是否可通过操作滑块进行切换
triggerType	"click"	通过操作滑块进行切换的事件类型
triggerDelay	150	当triggerType为'mouseover'或'mouseenter'时，未避免不小心滑动导致频繁切换的延迟时间
}
effectDeck {		牌组效果
type	"draw"	牌组类型，可选：'draw' - 抽取、'cover' - 覆盖
prevEasing	""	切换到上一个滑块的滑动公式，默认等同于easing
nextEasing	""	切换到下一个滑块的滑动公式，默认等同于easing
prevDuration	null	切换到上一个滑块的时间，默认等同于duration
nextDuration	null	切换到下一个滑块的时间，默认等同于duration
}

方法

方法名	说明
init()	初始化实例
destroy()	销毁实例
goto(index)	切换到指定下标滑块
gotoNext()	切换到下一滑块
gotoNext()	切换到下一滑块
gotoPrev()	切换到上一滑块
gotoFirst()	切换到第一个滑块
gotoLast()	切换到最后一个滑块

属性

属性名	说明
el	容器元素
params	合并后的配置选项
passedParams	传递的配置选项
wrapper	包裹元素
slideList	滑块元素列表
width	容器元素宽度
height	容器元素高度
pages	页码数
activeIndex	活动滑块下标
transitional	是否处于过渡期
previousActiveIndex	上一次活动滑块下标
switchType	切换类型，点击下一页按钮或调用下一页方法时值为'next'，点击上一页按钮或调用上一页方法时值为'prev'，否则为undefined
lastToFirst	是否从最后一个滑块切换到第一个滑块
firstToLast	是否从第一个滑块切换到最后一个滑块

事件

事件名	说明
init(instance)	初始化后触发
destroy(instance)	实例销毁后触发
resize(instance)	窗口大小调整时执行
sizeChange(instance)	容器元素大小变化时触发
activeIndexChange(instance)	活动滑块下标改变时触发
transitionStart(instance)	过渡开始时触发
transitionEnd(instance)	过渡结束时触发

Marquee

配置选项

参数	默认值	说明
init	true	实例化后是否立即初始化
interval	20	每一次位移的时间间隔
downInterval	5	鼠标按下时的interval值
offset	1	wrapper每一次位移的偏移量，单位px
downOffset	null	鼠标按下时的offset值，如果不设置，默认等同于offset
direction	"vertical"	运动方向，可选'vertical', 'horizontal'
translate	0	初始化时的位移
hoverPause	true	鼠标移上el是否停止
navigation {		前后按钮导航
prevEl	null	上一个按钮元素或选择器
nextEl	null	下一个按钮元素或选择器
downClass	"galaxy-button-down"	鼠标按下时添加到按钮元素上的类名
}

方法

方法名	说明
init()	初始化实例
destroy()	销毁实例
translateTo(value)	移动到指定位置

属性

属性名	说明
el	容器元素
params	合并后的配置选项
passedParams	传递的配置选项
wrapper	包裹元素
slideList	滑块元素列表
translate	移动的距离

Accordion

配置选项

参数	默认值	说明
init	true	实例化后是否立即初始化
labels	null	标签元素或选择器
panels	null	面板元素或选择器
multiple	false	是否可以打开多个
atLeastOne	true	当multiple为false时使用，至少要有一个显示，默认显示下标为activeIndex的panel
instant	true	切换时，如果上一个动画还没有过渡完，立即完成上一次动画并开始新的动画。
triggerType	"click"	labels触发事件的类型：可选'click', 'mouseenter'
triggerDelay	150	当triggerType为'mouseenter'时，为避免无意间滑动鼠标导致展开折叠
duration	300	滑块切换持续时间，单位毫秒
easing	"easeInOutQuad"	缓动公式
activeIndex	0	默认活动滑块的下标
direction	"vertical"	滑块切换的轴线，可选：'horizontal', 'vertical'
labelActiveClass	"galaxy-label-active"	当前活动的标签元素添加的类名
panelActiveClass	"galaxy-panel-active"	当前活动的面板元素添加的类名

方法

方法名	说明
init()	初始化实例
destroy()	销毁实例
show(index)	显示指定下标的面板
hide()	隐藏指定下标的面板
toggle(index)	显示/隐藏指定下标的面板
showAll()	显示所有面板
hideAll()	隐藏所有面板
onlyShow(index)	显示指定下标的面板，隐藏其他所有面板
onlyHide(index)	隐藏指定下标的面板，显示其他所有面板
hideOthersAndToggle(index)	显示/隐藏指定下标的面板，隐藏其他所有面板
showOthersAndToggle(index)	显示/隐藏指定下标的面板，显示其他所有面板

属性

属性名	说明
el	容器元素
params	合并后的配置选项
passedParams	传递的配置选项
labels	标签元素
panels	面板元素

GotoTop

配置选项

参数	默认值	说明
init	true	实例化后是否立即初始化
togglePoint	600	隐藏和显示的临界点高度，单位像素
duration	400	滚到顶部需要的时间
fadeDuration	300	el淡入淡出需要的时间
threshold	25	触发滚动事件的阈值

方法

方法名	说明
init()	初始化实例
destroy()	销毁实例

参数	默认值	说明
init	true	实例化后是否立即初始化
menuItems	null	菜单项元素或选择器
subMenu	null	子菜单元素或选择器
effect	"fade"	菜单项显示/隐藏效果，可选'fade', slide'
activeClass	"galaxy-menu-item-active"	当前活动菜单项添加的类名
duration	300	切换持续时间，单位毫秒
showDelay	50	延迟显示的时间，单位毫秒，为避免短时间类重复多次切换菜单
hideDelay	50	延迟隐藏的时间，单位毫秒，可在彻底隐藏前把鼠标移到菜单项上阻止隐藏

方法

方法名	说明
init()	初始化实例
destroy()	销毁实例

ScrollFixed

配置选项

参数	默认值	说明
init	true	实例化后是否立即初始化
fixedBox	null	用于固定的盒子，默认为el的第一个子元素
fixedClass	"galaxy-fixed"	fixedBox被固定时添加的类名
scrollBox	window	被监听滚动的盒子
offsetTop	1	偏移顶部距离，默认值为1是为避免有些浏览器定位到hash时，元素与浏览器顶部仍然有一个像素的距离导致无法切换
threshold	25	触发滚动事件的阈值

方法

方法名	说明
init()	初始化实例
destroy()	销毁实例

ScrollSpy

配置选项

参数	默认值	说明
init	true	实例化后是否立即初始化
labels	null	标签元素或选择器
scrollBox	window	被监听滚动的盒子
offsetTop	1	偏移顶部距离，默认值为1是为避免有些浏览器定位到hash时，元素与浏览器顶部仍然有一个像素的距离导致无法切换
threshold	25	触发滚动事件的阈值
activeClass	"galaxy-label-active"	当前活动的标签元素添加的类名

方法

方法名	说明
init()	初始化实例
destroy()	销毁实例

Tabs

配置选项

参数	默认值	说明
init	true	实例化后是否立即初始化
labels	null	标签元素或选择器
panels	null	面板元素或选择器
instant	true	切换时，如果上一个动画还没有过渡完，立即完成上一次动画并开始新的动画。
triggerType	"click"	labels触发事件的类型：可选'click', 'mouseenter'
triggerDelay	150	当triggerType为'mouseenter'时，为避免无意间滑动鼠标导致展开折叠
duration	300	滑块切换持续时间，单位毫秒
easing	"easeInOutQuad"	缓动公式
activeIndex	0	默认活动滑块的下标
labelActiveClass	"galaxy-label-active"	当前活动的标签元素添加的类名
panelActiveClass	"galaxy-panel-active"	当前活动的面板元素添加的类名

方法

方法名	说明
init()	初始化实例
destroy()	销毁实例
goto(index)	切换到指定下标的面板

属性

属性名	说明
el	容器元素
params	合并后的配置选项
passedParams	传递的配置选项
labels	标签元素
panels	面板元素
activeIndex	当前活动的面板的下标