宁波网站建设咨询:宁波网站建设
13780026116 宁波网站制作
网站公告
PHP技术
技术交流
网络推广
网站建设常见问答
殷雯动态
你的位置:首页> 新闻/观点 > 网站建设常见问答>JQUERY网页背景幻灯片-BGSTRETCHER
网站建设常见问答
JQUERY网页背景幻灯片-BGSTRETCHER

    好的动画效果可以让我们的网站项目增色不少. 在一些登陆页面上我们经常会设置一些背景图片,但是时间长了使用人未免会觉得乏味.切换背景图片显示效果是个不错的处理方法.在jquery动画中bgStretcher是个不错的网页背景切换代码.

这款插件可以允许我们设置动态的背景图片,我们只需要准备一张大图或一组大图,bgStretcher 会自动让图片适应整个网页,并且循环背景图片。bgStretcher 具有如下特点:
1、简单的脚本,简单的部署
2、能够在所有当代浏览器下工作

3、支持一张和多张图片

使用步骤
1、下载bgStretcher 的源码包
2、在 head 标签中引入相应的JS和CSS文件
jquery-1.5.2.min.js
bgstretcher.js
3、用下面的代码初始化调用bgStretcher 插件,仔细观察下面的参数
<script type="”text/javascript”">
$(document).ready(function(){
  $(’BODY’).bgStretcher({
    images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'],
    imageWidth: 1024,
    imageHeight: 768
    });
});
如果你想将bgStretcher部署到一个传统的div上,就可以用下面的方法来调用,实际上就类似于一个幻灯片的形式了。只需要将上面的 BODY 改为指定的div的ID或样式选择器即可。
$(document).ready(function(){
// Initialize Backgound Stretcher
$(’.classname-of-div’).bgStretcher({
   images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'],
   imageWidth: 1024,
   imageHeight: 768
   });
});

4、如果是整个网页的背景图片的话,只需要 body 即可,如果是插入到指定的div,则必须要相应的 div 标签。



点击:  1323    时间: 2018-09-14
上一条: 文化局在我公司文艺演出
下一条: PHP对多级栏目的调用方法
 
 
快速通道: 关于我们    网站建设    主机域名    付款方式    我的声明
  
联系我们
手机扫描QQ
网站建设咨询:
咨询热线:
宁波殷雯网站建设工作室
地 址: 浙江省宁波市江东区
电 话: 13780026116 
邮 箱:
waichun@qq.com
宁波网站建设
宁波网站制作
13780026116
宁波殷雯网站建设工作室 版权所有   浙ICP备16030041号-1