mb.disclose 旋转木马演示Html内容的jQuery插件

简介

mb.disclose是一个很棒的jQuery插件，它提供了一种在类似旋转木马的演示中显示Html内容的惊人方式。您可以使用Html5 data-*属性为每个Html元素自定义CSS3支持的动画。

（下载的附件中附有DEMO）

更多 HTML 演示插件：👉  [ 详情 ]

使用

1.  引入文件

<link href="css/mb.disclose.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="inc/jquery.mb.disclose.js"></script>

2.  HTML

创建用于点导航的Html：

<div id="slideIndex"></div>

创建演示文稿并使用data-*属性自定义幻灯片中Html元素的动画：

• data-animationin
• data-animationout
• data-time
• data-onenter
• data-onexit
• data-stop
• data-animate
• data-animationstart
• data-animationend
• data-animationtime
• data-animationdelay
• data-ease

<div id="mb<a href="https://www.jqueryscript.net/tags.php?/Carousel/">Carousel</a>">

  <div id="banner1" class="banner"
    data-animationin='{"top":"-100%", "opacity":0}'
    data-animationout='{"top":"-100%", "opacity":1}'
    data-time="10000">

    <h2 data-animate=true
      data-animationstart='{"font-size":"60px", "top":-100, "opacity":0, "color":"black"}'
      data-animationend='{"font-size":"120px", "top":0, "opacity":1, "color":"black"}'
      data-animationtime=500
      data-animationdelay='500'>... What is this?</h2>

    <div class="bannerText"
      data-animate=true
      data-animationstart='{"margin-bottom":-600, "opacity":0, "color":"black"}'
      data-animationend='{"margin-bottom":-30, "opacity":1, "color":"white"}'
      data-animationtime=3000>
    <p>Content 1</p>
    
    </div>
  </div>

  <div id="banner2" class="banner"
    data-animationin='{"left":"-100%", "opacity":0}'
    data-animationout='{"left":"100%", "opacity":0}'>

    <h2 data-animate=true
      data-animationstart='{"margin-left":-200, "opacity":0}'
      data-animationend='{"margin-left":0, "opacity":1}'
      data-animationdelay='500'>Banner 2 Title</h2>

    <img src="elements/COLOUR10.png"
      data-animate=true
      data-animationdelay='800'>

    <div class="bannerText"
      data-animate=true
      data-animationstart='{"margin-right":-600, "opacity":0}'
      data-animationend='{"margin-right":0, "opacity":1}'
      data-animationdelay='1000'>
    <p>Content 2</p>
    </div>
  </div>

  <div id="banner3" class="banner"
    data-animationin='{"top":"-500", "opacity":0}'
    data-animationout='{"top":"0", "opacity":0}'>

    <h2 data-animate=true
      data-animationstart='{"top":-200, "opacity":0}'
      data-animationend='{"top":20, "opacity":1}'
      data-animationdelay='800'>Banner 3 Title</h2>

    <img src="1.png"
      data-animate=true
      data-animationstart='{"left":-500, "opacity":0}'
      data-animationend='{"left":0, "opacity":1}'
      data-animationdelay='800'>

    <div class="bannerText"
      data-animate=true
      data-animationstart='{"margin-bottom":-600, "opacity":0, "color":"black"}'
      data-animationend='{"margin-bottom":0, "opacity":1, "color":"white"}'
      data-animationdelay='400'>
    <p> Content 3</p>
    </div>
  </div>

</div>

3.调用

$("#mbCarousel").disclose();

4.  配置

slideIntervall:5000,
inTimer:600,
outTimer:1000,
ease:"bezier(.24,.85,.32,.92)",
animationIn:{left:"100%", top:0, opacity:1},
animationOut:{left:"-100%", top:0, opacity:1},
autoPlay:false,
stopOnHover:true,
activateKeyboard:true,
indexPlaceHolder:"#slideIndex",
progressPlaceHolder:"#slideProgress",
onEnter:function(el, $el, $newEl){},
onExit:function(el, $el, $newEl){},
onInit:function(el){}

相关链接

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

易助科技网效果演示地址2：  http://demo.easyzone.net.cn/plugin/disclose/demo1.html