动态背景插件Backstretch
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的更多相关文章
- 网站开发常用jQuery插件总结(七)背景插件backstretch
一.backstretch插件功能 优化网站外观.主要用于设置页面背景图片,也可以设置html元素的背景图片.背景图片可以设置多张,在间隔时间内循环显示. 注 但是在设置背景图片时,如果图片过大,网站 ...
- jQuery背景插件backstretch使用指南
http://www.bkjia.com/Javascript/987917.html
- Visual Studio的背景插件
分享一个Visual Studio的背景插件,让堆码更富情趣..哈哈 忘记一件重要的事情,我使用的是VS 2012版,其他更高版本应该是可以找到的,以下版本就不清楚了.有可能找不到,见谅,也不是我 ...
- Adaptive Backgrounds – jQuery 自适应背景插件
Adaptive Backgrounds 是一款很特别的 jQuery 插件,可以从图像中提取主导颜色并将它应用到它的父元素.这个插件利用 Canvas 元素和 ImageData 对象.需要注意的是 ...
- JavaScript之动态背景登陆表单
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- duilib修复ActiveXUI控件bug，以支持flash透明动态背景
转载请说明原出处,谢谢~~ 昨天在QQ控件里和同学说起QQ2013登陆窗体的开发,从界面角度考虑,单单一个登陆界面是很容易做出来的.腾讯公司为了 防止各种盗号行为可谓煞费苦心,QQ2013采用了动态背 ...
- saltstack主机管理项目：动态调用插件解析-模块解析（五）
一.动态调用插件解析 1.目录结构 1.base_module代码解析: def syntax_parser(self,section_name,mod_name,mod_data): print(& ...
- 桌面应用开发之WPF动态背景
因为项目需要,在WPF开发的桌面应用中,登陆页面需使用动态背景.由于没有前端开发人员,所以由半吊子的后端开发人员根据效果图写前端xaml.去掉页面上边框,抽离动态背景设置代码: <Windo ...
- jqgrid 表格中筛选条件的多选下拉，树形下拉 ;文本框清除插件;高级查询多条件动态筛选插件[自主开发]
/** * @@desc 文本框清除按钮,如果isAutoWrap为false当前文本框父级必须是relative定位,boostrap参考input-group * @@author Bear.Ti ...
随机推荐
- C#生成DLL，在Unity中导入/调用DLL
网上搜了一些DLL的创建.编写.使用的学习资料,感觉比较的凌乱.或是复杂抽象,或是关键地方一笔带过,不是很适合萌新.于是决定还是图文记录一下该过程,尽量精简而又明确. 学习资料: https://do ...
- Linxu安装Tomcat与Jdk并卸载自带OpenJdk
下载安装tomcat 1.下载apache-tomcat-7.0.47.tar.gz tomcat压缩包上传到linxu服务器 2.cd到文件存放目录使用(tar -xvzf apache-tomca ...
- Vagrant (3) —— 复制/备份Vagrant Box
Vagrant (3) -- 复制/备份Vagrant Box 摘要 介绍复制/备份Vagrant Box基本方法 版本 Vagrant版本: 1.8.1 内容 复制vagrant box并压缩 关闭 ...
- c# winform+wcf代理上网的处理
程序是.net开发的winform工具,分服务器端和客户端,用wcf技术实现数据交互. 客户端是大型公司,内部统一使用代理服务器上网.具体描述为:在IE中设置lan代理服务器才能查询网络数据:登录QQ ...
- Extjs4.2 TreeView TreeStore 移除节点不触发delete（remove node don't trigger delete method）
当我们操作treeview的时候,新增节点,如果成功则新增node,如果失败的话我们不想node还显示出来,可以通过监听sync的failure事件,失败时候移除node,但是第一次肯定达到了预期效果 ...
- MSSQL跨服务器查询
1.因为此功能服务器安全配置的一部分而被关闭,所以我们先开启 reconfigure reconfigure 2.如果需要关闭,执行 reconfigure reconfigure 3.查询语句 SE ...
- Development Tools
Introduction Even Chris created his article of Useful Reference Books ages ago I just bumped into it ...
- 关于Unity中的3D拾取
3D拾取 3D游戏实际上看到的是2D画面,我们在屏幕上点击,想要找到哪个3D物体,我们实际上是在一个2维平面内做3D拾取. 3D拾取实际上是,当玩家点击屏幕的时候,会从显示屏幕的摄像头发射一条射线,射 ...
- 使用Photoshop实现雪花飘落的效果
一.准备工作 软件环境:PhotoshopCS5 实验目的:雪花飘落的效果 二.实验步骤 1,打开素材图片并将原图层复制 2,在菜单栏内选择:滤镜->像素化->点状化,单元格大小选6 提 ...
- 第三百七十节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索结果分页
第三百七十节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索结果分页 逻辑处理函数 计算搜索耗时 在开始搜索前:start_time ...