您现在的位置是:首页 > 网站建设常见问答网站建设常见问答
JQUERY网页背景幻灯片-BGSTRETCHER
2018-09-14【网站建设常见问答】1976 人已围观
简介 好的动画效果可以让我们的网站项目增色不少. 在一些登陆页面上我们经常会设置一些背景图片,但是时间长了使用人未免会觉得乏味.切换背景图...
好的动画效果可以让我们的网站项目增色不少. 在一些登陆页面上我们经常会设置一些背景图片,但是时间长了使用人未免会觉得乏味.切换背景图片显示效果是个不错的处理方法.在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 标签。
关注宁波网站建设博客,更多精彩分享,敬请期待!
Tags:
很赞哦! ()
上一篇:linux显示当前版本
下一篇:Jquery判断元素是否存在?
相关文章
随机图文
【网站内容建设】避免自己的页面成为搜索引擎的补充材料
我们在网站制作与推广的时候发现,有些网站内容虽然被收录,但仅仅是被作为一个补充材料被收录。补充材料就是搜索引擎辅助索引的一部分,这些内容...文化局在我公司文艺演出
随后,文艺演出隆重举行,精彩的表演不断换来员工们的精彩表演。在表演节目的期间,还穿插了些有奖知识问答,在座的每位都是积极参与活动,整个场面十...PSD切片的CSS和布局经验与要点
做网站特别是前台呈现的美工在刚学完CSS基础要去实际操作进行网页切图的时候,总感觉无从下手。在这里我为大家简单总结一下,一些网页切图的经验...云服务器和云虚拟主机有什么区别吗
网站完成开发后,对网络用户允许访问就需要服务器。那么网上热门的云服务器和虚拟主机区别是什么呢?今天我们通俗的给大家解释一下: 虚拟机就是将...