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

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

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

简介


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

(下载的附件中附有DEMO)


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


在类似旋转木马的演示中显示Html内容的jQuery插件mb.disclose



使用


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