网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2025/12/27 浏览:3 次 )

本文实例讲述了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插件方式实现强制对象重绘的方法
下一篇:javascript实现客户端兼容各浏览器创建csv并下载的方法
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。