flux能够实现5种3D效果,它们分别是:爆炸效果、3D翻转效果、3D旋转效果、立方体效果和翻页效果。
HTML结构
<div id="slider">
<img src="imgs/peacock.jpg" alt="" />
<img src="imgs/koi.jpg" alt="" />
<img src="imgs/life.jpg" alt="" />
</div>
<ul class="transitions">
<li><button type="button" data-transition="explode" data-params='{"rows": 4}'>Explode</button></li>
<li><button type="button" data-transition="tiles3d" data-params='{"columns": 6}'>Tile</button></li>
<li><button type="button" data-transition="bars3d">Bars</button></li>
<li><button type="button" data-transition="cube">Cube</button></li>
<li><button type="button" data-transition="turn">Turn</button></li>
</ul>
调用方法
首先要引入jQuery和jquery.flux.js文件。然后按下面方法调用:
$(function(){
if(!flux.browser.supportsTransitions)
alert("Flux Slider requires a browser that supports CSS3 transitions");
window.f = new flux.slider('#slider', {
pagination: false,
controls: false,
transitions: ['explode', 'tiles3d', 'bars3d', 'cube', 'turn'],
autoplay: false
});
$('.transitions').click(function(event){
event.preventDefault();
window.f.next($(event.target).data('transition'), $(event.target).data('params'));
});
});
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!