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

 更新时间:2015年03月23日 12:33:00   作者:work24  
这篇文章主要介绍了jQuery定义背景动态切换效果的方法,实例分析了jQuery操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • jQuery filter函数使用方法

    jQuery filter函数使用方法

    利用filter函数可以从wrapper set中过滤符合条件的DOM元素,下面是其具体的用法,希望对大家有所帮助
    2014-05-05
  • 基于jQuery实现动态数字展示效果

    基于jQuery实现动态数字展示效果

    Jq数据列表动态效果,动态更新,支持Ajax动态刷新。下面小编给大家介绍下基于jQuery实现动态数字展示效果,需要的朋友可以参考下
    2015-08-08
  • jquery获取css的color值返回RGB的方法

    jquery获取css的color值返回RGB的方法

    这篇文章主要介绍了jquery获取css的color值返回RGB的方法,涉及jQuery字符串正则运算与数值转换的相关技巧,需要的朋友可以参考下
    2015-12-12
  • jQuery插件制作之全局函数用法实例

    jQuery插件制作之全局函数用法实例

    这篇文章主要介绍了jQuery插件制作之全局函数用法,实例分析了jQuery中全局函数的相关使用技巧,需要的朋友可以参考下
    2015-06-06
  • JQuery选择器、过滤器大整理

    JQuery选择器、过滤器大整理

    这篇文章主要介绍了JQuery选择器、过滤器大整理,经过一晚上的查找整理,终于整理出一套应该算最全面的JQuery选择过滤器的方法了,需要的朋友可以参考下
    2015-05-05
  • jQuery Validate插件ajax方式验证输入值的实例

    jQuery Validate插件ajax方式验证输入值的实例

    下面小编就为大家分享一篇jQuery Validate插件ajax方式验证输入值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 幻灯片带网页设计中的20个奇妙应用示例小结

    幻灯片带网页设计中的20个奇妙应用示例小结

    幻灯片效果在网站中的使用非常流行,使用幻灯片效果既能在有限的网页空间内展示更多的内容,又能增强视觉趣味,网上众多的幻灯片插件资源也使得幻灯片的实现变得十分简单
    2012-05-05
  • jQuery 前的按键判断代码

    jQuery 前的按键判断代码

    刚看到个问题,如何得知同时按下了哪几个键以及按键顺序(难道是格斗游戏的组合键?),其实jQuery实现起来是很简单的。
    2010-03-03
  • Jquery技巧(必须掌握)

    Jquery技巧(必须掌握)

    这篇文章主要介绍了Jquery技巧(必须掌握)的相关资料,需要的朋友可以参考下
    2016-03-03
  • 解析jquery中的ajax缓存问题

    解析jquery中的ajax缓存问题

    现在我要在浏览器里读取缓存,因为ajax请求的数据很大,请求一次就够了。但是问题来了,在FF里面,是没有ajax缓存的,也就是每次都会触发ajax请求,这点和IE不一样
    2013-12-12

最新评论