jQuery全屏背景图片无限循环缩放动画特效

当前位置:主页 > jQuery库 > 图片效果 > jQuery全屏背景图片无限循环缩放动画特效
jQuery全屏背景图片无限循环缩放动画特效
分享:

    插件介绍

    mkinfinite是一款效果非常酷的jQuery全屏背景图片无限循环缩放动画特效。这个背景图片插件可以允许你设置一组背景图片,然后插件会依次显示和缩放这组背景图片,效果非常的炫酷。

    浏览器兼容性

    浏览器兼容性
    时间:2015-08-01
    阅读:
简要教程

mkinfinite是一款效果非常酷的jQuery全屏背景图片无限循环缩放动画特效。这个背景图片插件可以允许你设置一组背景图片,然后插件会依次显示和缩放这组背景图片,效果非常的炫酷。

使用方法

使用该背景图片插件需要引入jQuery和jquery.mkinfinite.js文件。

<script src="js/jquery.min.js"></script>
<script src="jquery.mkinfinite.js"></script>                
              
初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该背景图片插件。可以在参数中传入一组你需要的背景图片。

$('#container').mkinfinite({
  imagesList: new Array(
    '1.jpg',
    '2.jpg',
    '3.jpg',
    '4.jpg',
    '5.jpg'
  )
});              
              

配置参数

下面是该背景图片插件的默认配置参数。

  • Zoom:背景图片缩放的倍数。默认值1.25。
  • imagesRatio:背景图片的宽高比。默认值1.5。
  • animationTime:背景图片缩放动画的持续时间,单位毫秒,默认值5000。
  • animationInterval:切换背景图片的延迟时间,单位毫秒,默认值10。
  • isFixedBG:是否将背景图片设置为全屏背景。默认值false
  • zoomIn:背景图片放大还是缩小。默认值为true,表示背景图片由大变小。
  • imagesList:背景图片数组。