Backstretch是一款简单的jQuery插件，可以帮助你给网页添加一个动态的背景图片，可以自动调整大小适应屏幕的尺寸，当然这样做的缺点是当图片尺寸比屏幕小的时候,图片会因为自动延伸而变形，所以我们可以劲量使用高分辨率大尺寸的图片做背景,更重要的是支持图片的自动切换。

http://www.jquery-backstretch.com/

https://github.com/jquery-backstretch/jquery-backstretch

具体用法

<script type="text/javascript" src="/jquery.min.js"></script>

<script type="text/javascript" src="/jquery.backstretch.min.js"></script>

　　指定元素实现背景切换，设置切换的图片与图片切换的间隔时间duration,代码以下：

<script>

$(function () { $(".container").css({ opacity:0.8 });

//设置透明度

 $.backstretch([ 
　　　　　　　　　　"Images/backgrounds/101_1.jpg",
　　　　　　　　　　"Images/backgrounds/44_1.jpg" 
　　　　　　　　　　], { duration: 3000, fade: 750 });

 });

</script>

完整代码

<html>

<head>

    <title>Backstretch</title>

    <style>

.container {

   width: 90%;

   margin: 20px auto;

   background-color: #FFF;

   padding: 20px;

 }

 </style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="jquery.backstretch.js"></script>

</head>

<body>

<div class="container">Backstretch是一款简单的jQuery插件，可以帮助你给网页添加一个动态的背景图片，可以自动调整大小适应屏幕的尺寸，当然这样做的缺点是当图片尺寸比屏幕小的时候,图片会因为自动延伸而变形，所以我们可以劲量使用高分辨率大尺寸的图片做背景,更重要的是支持图片的自动切换。

</div>

</body>

<script>

$(function(){$(".container").css({ opacity:0.8 });

//设置透明度

     $.backstretch([

     "Images/pic.jpg",

     "Images/pic2.jpg"

     ], { duration: 3000, fade: 750 });

});

</script>

</html>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="jquery.backstretch.min.js"></script>

<script>

  // Backstrech作为body元素的背景

  $.backstretch("path/to/image.jpg");

  //你也可以将它添加到块级元素

  $(".foo").backstretch("path/to/image.jpg");

  // 如果你的元素用CSS定义了一个背景图像，你可以完全省略参数

  $(".foo").backstretch();

  // 或者一系列的图片组

  $(".foo").backstretch([

    "path/to/image.jpg",

    "path/to/image2.jpg",

    "path/to/image3.jpg"

  ], {duration: 4000});

  // 或者，从可以接受分辨率并提供该分辨率的最佳图像的网址进行加载

  $(".foo").backstretch([

    "path/to/image.jpg?width={width}&height={height}"

  ]);

  // 或者，从一组分辨率中自动选择。

   //宽度是图像的宽度，并且算法选择最佳拟合.

  $(".foo").backstretch([

    [

      { width: 1080, url: "path/to/image1_1080.jpg" },

      { width: 720, url: "path/to/image1_720.jpg" },

      { width: 320, url: "path/to/image1_320.jpg" }

    ],

    [

      { width: 1080, url: "path/to/image2_1080.jpg" },

      { width: 720, url: "path/to/image2_720.jpg" },

      { width: 320, url: "path/to/image2_320.jpg" }

    ]

  ]);

  //如果我们想为不同的像素比率指定不同的图像：

  $(".foo").backstretch([

    [

      // Will only be chosed for a @2x device

      { width: 1080, url: "path/to/image1_1080@2x.jpg", pixelRatio: 2 },

      // Will only be chosed for a @1x device

      { width: 1080, url: "path/to/image1_1080.jpg", pixelRatio: 1 },

      { width: 720, url: "path/to/image1_720@2x.jpg", pixelRatio: 2 },

      { width: 720, url: "path/to/image1_720.jpg", pixelRatio: 1 },

      { width: 320, url: "path/to/image1_320@2x.jpg",  pixelRatio: 2 },

      { width: 320, url: "path/to/image1_320.jpg", pixelRatio: 1 }

    ]

  ]);

  //如果我们希望浏览器自动从一组分辨率中进行选择，

   //考虑设备的像素比例

  $(".foo").backstretch([

    [

      // Will be chosen for a 2160 device or a 1080*2 device

      { width: 2160, url: "path/to/image1_2160.jpg", pixelRatio: "auto" }, 

      // Will be chosen for a 1080 device or a 540*2 device

      { width: 1080, url: "path/to/image1_1080.jpg", pixelRatio: "auto" },

      // Will be chosen for a 1440 device or a 720*2 device

      { width: 1440, url: "path/to/image1_1440.jpg", pixelRatio: "auto" },

      { width: 720, url: "path/to/image1_720.jpg", pixelRatio: "auto" },

      { width: 640, url: "path/to/image1_640.jpg", pixelRatio: "auto" },

      { width: 320, url: "path/to/image1_320.jpg", pixelRatio: "auto" }

    ]

  ]);

</script>

动态背景插件Backstretch的更多相关文章

  1. 网站开发常用jQuery插件总结(七)背景插件backstretch

    一.backstretch插件功能 优化网站外观.主要用于设置页面背景图片,也可以设置html元素的背景图片.背景图片可以设置多张,在间隔时间内循环显示. 注 但是在设置背景图片时,如果图片过大,网站 ...

  2. jQuery背景插件backstretch使用指南

    http://www.bkjia.com/Javascript/987917.html

  3. Visual Studio的背景插件

    分享一个Visual Studio的背景插件,让堆码更富情趣..哈哈   忘记一件重要的事情,我使用的是VS 2012版,其他更高版本应该是可以找到的,以下版本就不清楚了.有可能找不到,见谅,也不是我 ...

  4. Adaptive Backgrounds – jQuery 自适应背景插件

    Adaptive Backgrounds 是一款很特别的 jQuery 插件,可以从图像中提取主导颜色并将它应用到它的父元素.这个插件利用 Canvas 元素和 ImageData 对象.需要注意的是 ...

  5. JavaScript之动态背景登陆表单

    <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  6. duilib修复ActiveXUI控件bug，以支持flash透明动态背景

    转载请说明原出处,谢谢~~ 昨天在QQ控件里和同学说起QQ2013登陆窗体的开发,从界面角度考虑,单单一个登陆界面是很容易做出来的.腾讯公司为了 防止各种盗号行为可谓煞费苦心,QQ2013采用了动态背 ...

  7. saltstack主机管理项目：动态调用插件解析-模块解析（五）

    一.动态调用插件解析 1.目录结构 1.base_module代码解析: def syntax_parser(self,section_name,mod_name,mod_data): print(& ...

  8. 桌面应用开发之WPF动态背景

      因为项目需要,在WPF开发的桌面应用中,登陆页面需使用动态背景.由于没有前端开发人员,所以由半吊子的后端开发人员根据效果图写前端xaml.去掉页面上边框,抽离动态背景设置代码: <Windo ...

  9. jqgrid 表格中筛选条件的多选下拉，树形下拉 ;文本框清除插件;高级查询多条件动态筛选插件[自主开发]

    /** * @@desc 文本框清除按钮,如果isAutoWrap为false当前文本框父级必须是relative定位,boostrap参考input-group * @@author Bear.Ti ...

随机推荐

  1. JDK 5.0 注解的使用

    了解注解 在编写代码时,除了源程序以外,我们还会使用Javadoc标签对类.方法或成员变量进行注解,以便使用Javadoc工具生成和源代码配套的Javadoc文档. /** * 重写toString ...

  2. <[完整版]中国式价值投资>读书笔记

    注重本金安全 股票价格的高级与股票的贵贱没有任何关系 同股同权的应该买便宜的 买未来有可能变得更大的优秀公司股票,只有他们的股价才有可能有持续向上的原动力 如果绝大多数投资者对股票高市盈率不是拒绝而是 ...

  3. tar包解压后用户名改变

    最近开发项目时在PC上wang用户及组下打包的tar包解压到嵌入式设备root用户下,文件目录及文件用户名改为dbus和dbus组,导致cron等应用异常. 出现此问题时可以通过修改相应文件(件)的用 ...

  4. strtok的基本使用方法

    理论知识自己能够百度这里直接上代码 代码的内容是 HDU(杭电)-1106-排序 排序 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 655 ...

  5. 逐行分析jQuery源码

    注意:本次源码分析选择2.0.3(因为不支持IE6.7.8,就少了很多兼容的hack的写法,对了解jQuery的实现原理有很大的帮助) 1.jQuery有不同的版本,从2.x版本便不再支持IE6.7. ...

  6. 小程序的tab标签实现效果

    swiper制作tab切换 index.html ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <view class="swiper-tab&qu ...

  7. Three ways to make your WPF images pop out on MouseOver

    There are a couple of ways in WPF to make an image pop out when moving mouse over it. Of course we w ...

  8. Chrome 各版本下载集合

    Windows平台: Chrome 在线安装包: 最新稳定版(Stable Channel)Chrome在线安装: [点击这里] 最新测试版(Beta Channel)Chrome在线安装: [点击这 ...

  9. modelsim 出现此错误怎么办

    笔者的电脑装成了win8的系统,然后像平常一样打开modelsim,这时跳出如下图的界面: 笔者的modelsim之前是安装过的,所以这个界面已经说明,当前的许可证没有安装好.解决上述问题的办法是重新 ...

  10. static为什么一般与final一起用？

    static和final的意义是不同的,static修饰的时候代表对象是静态的,而final修饰的时候代表对象只能赋值一次,他们连用的时候是因为定义的那个对象既要它是静态的,也要求它的值不能再被修改. ...