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 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
Display SQL Server Login Mode
Jun 21 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
js轮播图之旋转木马效果
Oct 13 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
一个php作的文本留言本的例子(六)
2006/10/09 PHP
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
PHP生成随机密码类分享
2014/06/25 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
js Calender控件使用详解
2015/01/05 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
JavaScript 自定义事件之我见
2017/09/25 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
Python中os.path用法分析
2015/01/15 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
python中rc1什么意思
2020/06/19 Python
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
硕士生找工作求职信
2014/07/05 职场文书
共青团员自我评价范文
2014/09/14 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
领导班子整改方案
2014/10/25 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
处罚决定书范文
2015/06/24 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
css3 选择器
2022/05/11 HTML / CSS