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

JQuery制作翻牌翻转特效插件quickflip

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

简介


Jquery.quickflip.js是一款非常经典的翻转翻牌的特效插件,它可以在有效的DIV上展示更多的内容。当我们用鼠标单击,或者用鼠标滑过时,也可以水平翻转、垂直翻转,还可以像翻牌一样来切换内容。


JQuery制作翻牌翻转特效插件quickflip-示例图




插件参数:


closeSpeed:180, //关闭层的速度,默认关闭速度是180

openSpeed:120, //打开层的速度,默认打开速度是120

ctaSelector:".quickFlipCta", //超链接的样式,记住这里一定加要点,即.cursor

refresh:false, //默认为false,官方确实有这个参数,但我没看懂是什么意思。

easing:'swing', //切换的过渡效果(目前只有这一个效果)

noResize:true, //默认为false,官方确实有这个参数,但我没看懂是什么意思。

vertical:false, //默认为false,是否垂直翻转。说实话,这里垂直的效果做的不好,可以打开closeSpeed和openSpeed来查看效果



使用


1   引入 jquery.js 和 jquery.quickflip.js 文件


2.  HTML


<div class="quickFlip">
  <div>
    <a href="#" class="quickFlipCta">
      <img src="images/1.jpg" width="600" height="440" border="0" />
    </a>
  </div>
  
  <div>
    <a href="#" class="quickFlipCta">
      <img src="images/2.jpg" width="600" height="440" border="0" />
    </a>
  </div>
</div>


3.  调用


<script type="text/javascript">
  $(function() {
    $('.quickFlip').quickFlip();
  });
</script>



相关链接


官方地址 :http://jonraasch.com/blog/quickflip-2-jquery-plugin

开发文档 :http://dev.jonraasch.com/quickflip/docs

效果演示 : http://dev.jonraasch.com/quickflip/examples/