使用jQuery插件bgStretcher.js实现全屏响应式背景特效
  • 分享到微信朋友圈
    X
立即下载 查看演示

jQuery bgStretcher (Background Stretcher)，可以为你的网页添加能够自动切换多张背景图，同时背景图大小可以自适应浏览器窗口的大小。 你也可以设置背景图的切换效果比如淡入淡出，滚动，幻灯，还可以设置滚动的方向，比如上下左右，或者左上右下，右上左下。图片切换顺序也可以设置正向，反向或者随机。

该插件不只是用于整个网页背景哦，还可以用于某个网页元素。

使用方法

引入JQuery和bgStretcher库‌：

<script src="bgstretcher/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="bgstretcher/bgstretcher.css" />
<script src="bgstretcher/bgstretcher.js"></script>

初始化与说明

<script language="javascript">
    $(function () {
        $('BODY').bgStretcher({
            //包含要在页面背景上显示的图像列表的数组
            images: ['images/01.jpg', 'images/02.jpg', 'images/03.jpg', 'images/04.jpg', 'images/05.jpg', 'images/06.jpg'],
            //原始图像的宽度
            imageWidth: 1024,
            //原始图像的高度
            imageHeight: 768,
            //该参数设置延迟直到下一张幻灯片开始。
            nextSlideDelay: 3000,
            //幻灯片方向
            slideDirection: 'N',
            //图像之间的转换速度
            slideShowSpeed: 3000,
            //过渡效果
            transitionEffect: 'fade',
            //序列模式
            sequenceMode: 'normal',
            //上一个按钮 CSS 选择器
            buttonPrev: '#prev',
            //下一个按钮 CSS 选择器
            buttonNext: '#next',
            //分页的 CSS 选择器
            pagination: '#nav',
            //锚定有关窗口的 bgStrtcher 区域
            anchoring: 'left center',
            //锚定有关窗口的图像
            anchoringImg: 'left center'
        });
    });  
</script>

更多参数

  • imageContainer 'bgstretcher' 图像容器

  • resizeProportionally true 指示背景图像是否将按比例调整大小。

  • resizeAnimate false 指示背景图像是否将通过动画调整大小。

  • images '' 包含要在页面背景上显示的图像列表的数组。

  • imageWidth 1024 原始图像的宽度。

  • imageHeight 768 原始图像的高度。

  • maxWidth 'auto' 最大图像宽度。

  • maxHeight 'auto' 最大图像高度。

  • nextSlideDelay 10000 （10秒） 以毫秒为单位的数值。该参数设置延迟直到下一张幻灯片开始。

  • slideShowSpeed 'normal' 以毫秒为单位的数值或 jQuery 字符串值（'fast'、'normal'、'slow'）。该参数设置图像之间的转换速度。

  • slideShow true 允许或禁止幻灯片功能。

  • transitionEffect 'fade' 过渡效果（也可使用：none, fade, simpleSlide, superSlide）。

  • slideDirection 'N' 幻灯片方向：N – 北、S – 南、W – 西、E – 东（如果transitionEffect = superSlide 还使用：NW、NE、SW、SE）。

  • sequenceMode 'normal' 序列模式（也可使用：后退、随机）

  • buttonPrev '' 上一个按钮 CSS 选择器

  • buttonNext '' 下一个按钮 CSS 选择器

  • pagination '' 用于分页的 CSS 选择器

  • anchoring ‘left top’ 锚定有关窗口的 bgStrtcher 区域

  • anchoringImg ‘left top’ 锚定有关窗口的图像

  • preloadImg false 对于预加载图像，请使用 true

  • startElementIndex 0 起始元素索引

  • callbackfunction null 回调函数名称