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 相关文章推荐
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
React事件处理的机制及原理
Dec 03 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
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的变量类型和作用域详解
2014/03/12 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
javascript 页面只自动刷新一次
2009/07/10 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
js实现简单的秒表
2020/01/16 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
Python中的tuple元组详细介绍
2015/02/02 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python 处理数据的实例详解
2017/08/10 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
python动态视频下载器的实现方法
2019/09/16 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
database面试题
2013/03/28 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
婚礼双方父亲致辞
2015/07/27 职场文书
2016年清明节寄语
2015/12/04 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android