动画方式
-
Flickerplate——小巧的jQuery幻灯片插件
-
可修改 Javascript 或 CSS查看参数,看看如何修改成你需要的效果
-
触摸事件引入 jQuery Finger 插件可支持移动设备触摸事件
Flickerplate 的动画方式有 transition-slide、transform-slide、jquery-slide 和 scroller-slide 四种,主要是使用 CSS3 或 JavaScript 方式,视觉效果上并无太大差异。JavaScript 方式可兼容不支持 CSS3 的浏览器(如低版本 IE)。
JavaScript
$(function(){
$('.flicker-example').flicker({
flick_animation: 'jquery-slide',
block_text: false
});
});
HTML
<div class="flicker-example">
<ul>
<li data-background="img/field.jpg">
<div class="flick-title">Flickerplate</div>
<div class="flick-sub-text">——小巧的jQuery幻灯片插件</div>
</li>
<li data-background="img/forest.jpg">
<div class="flick-title">可修改 Javascript 或 CSS</div>
<div class="flick-sub-text">查看参数,看看如何修改成你需要的效果</div>
</li>
<li data-background="img/frozen-water.jpg">
<div class="flick-title">触摸事件</div>
<div class="flick-sub-text">引入 jQuery Finger 插件可支持移动设备触摸事件</div>
</li>
</ul>
</div>