jQuery背景插件backstretch使用指南


Posted in Javascript onApril 21, 2015

一.backstretch插件功能

优化网站外观。主要用于设置页面背景图片,也可以设置html元素的背景图片。背景图片可以设置多张,在间隔时间内循环显示。

但是在设置背景图片时,如果图片过大,网站使用的资源又受到限制时,应压缩图片的大小。不然图片的加载会非常缓慢。我测试了官方网站的demo,图片都比较大,有的图片在400kb以上,在虚拟空间中打开网站,图片加载有点慢。

插件demo的截图效果不明显,所以不在本文贴出,大家可以去官方看demo演示,或在本文的下面,也有我测试这个插件的用例,可以看一下,中文演示。

测试用例使用的图片来自于网络,并且大小都在100kb以上,使用官方图片一张。由于只是测试插件使用,所以没有对图片进行压缩。

二.backstretch官方地址

官方地址上有插件的详细使用说明,官方地址:https://github.com/srobbin/jquery-backstretch

三.backstretch使用方法

1.引用文件
<script src="jquery.js"></script>
<script src="jquery.backstretch.js"></script>
2.测试使用的样式

body { font-family: 微软雅黑; line-height: 1.3em; -webkit-font-smoothing: antialiased; }
.container {
   width: 90%;
   margin: 20px auto;
   background-color: #FFF;
   padding: 20px;
 }
h1{
  font-weight:normal;
}
pre, code {
 font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
 font-size: 12px;
 color: #333;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}
pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px; overflow: scroll; }
code { padding: 2px 4px; background-color: #F7F7F9; border: 1px solid #E1E1E8; color: #D14; }
.other { height: 300px; color: #FFF; }
.other div {
 position: absolute;
 bottom: 0;
 width: 100%;
 background: #000;
 background: rgba(0,0,0,0.7);
}
.other div p { padding: 10px; }

3.使用的js。插件使用非常简单。

$(function(){
  $(".container").css({ opacity: .8 });  //设置透明度
  $.backstretch(["bg.jpg"]); //背景
  $(".other").backstretch(["b.jpg","a.jpg","coffee.jpg"],{duration:4000}); //元素背景,切换现实
});

其实自定义网页背景的方法有很多种,在加上jQuery的强大,我们也可以利用jQuery实现的一些图片切换效果的案例去修改并实现动态图片的切换,最后希望大家喜欢!

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
纯js实现动态时间显示
Sep 07 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
详解JavaScript作用域 闭包
Jul 29 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 #Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 #Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 #Javascript
jQuery验证插件validation使用指南
Apr 21 #Javascript
jQuery拖拽插件gridster使用指南
Apr 21 #Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 #Javascript
jQuery提示插件alertify使用指南
Apr 21 #Javascript
You might like
关于尾递归的使用详解
2013/05/02 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
python利用datetime模块计算时间差
2015/08/04 Python
python中的错误处理
2016/04/10 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
Python 字符串与数字输出方法
2018/07/16 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
Django 批量插入数据的实现方法
2020/01/12 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
英国在线花园中心:You Garden
2018/06/03 全球购物
科级干部考察材料
2014/02/15 职场文书
保险经纪人求职信
2014/03/11 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
户籍证明模板
2014/09/28 职场文书
民事申诉状范本
2015/05/20 职场文书
python套接字socket通信
2022/04/01 Python
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS