jQuery定义背景动态切换效果的方法


Posted in Javascript onMarch 23, 2015

本文实例讲述了jQuery定义背景动态切换效果的方法。分享给大家供大家参考。具体如下:

通过下面的jQuery插件,你可以将图片放在一个数组里,然后告诉jQuery图片需要在什么地方背景轮换

(function($){
 var defaultSettings;
 var divfg, divbg;
 var fadeInterval;
 var fqTimer;
 var currImg = 0;
 var displImg = 0;
 var running = false;
 // Setup settings and initialize the plugin
 $.fn.bgFade = function(settings, callback){
  defaultSettings = $.extend({
   frequency: 5000,
   speed: 10,
   images: [],
   position: "center center",
   fgz: 1,
   bgz: 0
  }, settings);
  var c = 0;
  $(this).each(function(){
   if(c == 0) divfg = $(this);
   if(c == 1) divbg = $(this);
   c++;
  });
  setBackgrounds();
  if(typeof callback == "function"){
   callback();
  }
  return this;
 };
 // Start the fadder
 $.fn.start = function(){
  fqTimer = setTimeout(function(){
  nextFade()},defaultSettings.frequency
  );
  running = true;
  return this;
 };
 // Stop the fadder
 $.fn.stop = function(){
  clearInterval(fadeInterval);
  clearTimeout(fqTimer);
  running = false;
  return this;
 }
 // Get the current image info {array id, image url}
 $.current = function(){
  return {pos: displImg, url: defaultSettings.images[displImg]}
 }
 // Set the first two backgrounds
 function setBackgrounds(){
  image1 = defaultSettings.images[0];
  image2 = defaultSettings.images[1];
  divfg.css({
   backgroundImage: "url('"+image1+"')",
   zIndex: defaultSettings.fgz,
   backgroundPosition: defaultSettings.postion
  });
  divbg.css({
   backgroundImage: "url('"+image2+"')",
   zIndex: defaultSettings.bgz,
   backgroundPosition: defaultSettings.postion
  });
  currImg = 1;
  displImg = 0;
 }
 // Set the next background after a fade completes
 function setNextBackground(){
  next = arrayNext();
  image = defaultSettings.images[next];
  divbg.css({
   backgroundImage: "url('"+image+"')"
  });
  setTimeout(function(){nextFade()}, defaultSettings.frequency);
 }
 // Run a fade
 function nextFade(){
  fadeInterval = setInterval(function(){fadeIt()}, 30);
 }
 // Decrement the opacity of the div
 function fadeIt(){
  if(divfg.css("opacity") == ''){
   op = 1;
  }else{
   op = divfg.css("opacity");
  }
  op -= ((1000 * defaultSettings.speed) / 30) * 0.0001;
  divfg.css("opacity", op);
  if(op <= 0){
   bg = divbg;
   bgimg = divbg.css("background-image");
   divfg.css("opacity", "1");
   divfg.css("background-image", bgimg);
   clearInterval(fadeInterval);
   setNextBackground();
   displImg = arrayCurrent();
  }
 }
 // Get the next item in the array
 function arrayNext(){
  var next = currImg + 1;
  if(next >= defaultSettings.images.length){
   next = 0;
  }
  currImg = next;
  return next;
 }
 // Get the current item in the array
 function arrayCurrent(){
  var cur = currImg - 1;
  if(cur < 0)
   cur = defaultSettings.images.length - 1;
  return cur;
 }
})(jQuery);

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
window.ActiveXObject使用说明
Nov 08 Javascript
jquery json 实例代码
Dec 02 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
详解Vue单元测试case写法
May 24 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 #Javascript
jQuery实现拖拽效果插件的方法
Mar 23 #Javascript
jQuery操作表单常用控件方法小结
Mar 23 #Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 #Javascript
JavaScript中匿名函数用法实例
Mar 23 #Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 #Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 #Javascript
You might like
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
php数据库备份还原类分享
2014/03/20 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python实现事件驱动
2018/11/21 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
微观物理专业自荐信
2014/01/26 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
2014年团支部工作总结
2014/11/17 职场文书
2015年保管员工作总结
2015/04/30 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
如何写新闻稿
2015/07/18 职场文书
环保建议书范文
2015/09/14 职场文书