WEB前端开发人员交流社区

搜索
查看: 1101|回复: 2

[jQuery] 基于jQuery写的一个网页背景切换的插件

[复制链接]

94

主题

150

帖子

148

积分

管理员

会在前端的道路上一直走下去!

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

积分
148

社区QQ达人

发表于 2016-4-1 14:31:08 | 显示全部楼层 |阅读模式
在网上看见不少的大牛们的主页,背景都是随机切换图片的,你刷新也是随机的,看起来特别酷的样子
然后,昨天大姐找到我说,想写一个这样的功能,最后,这个插件就撸了出来,可能当中有一些不足之处,望各位大牛,多多指教!


效果什么的,一定会完善,现在只有一个淡入淡出的效果,不多说,请看代码!
[JavaScript] 纯文本查看 复制代码
/**
 * Created by Falost on 2016/4/1.
 * Name:jQuert.bgSlide.js
 */
(function ($) {
  $.fn.bgSlide= function (options) {
    var defaults = {
      bgs: [],//储存背景
      model: 'default', //可选项 custom
      max: 13,//切换的个数
      bg: 0,//当前的位置
      times: 5000,//切换时间
      speed: 'fast', // 可换为 mormal  , slow
      opacity: 0.4,//透明度
      abs: this, //默认参数请勿修改,除非你已知他的用处
      arr: [],//请勿修改,缓存区
      url: ''
    };
    var ops = $.extend(defaults, options);
    if (ops.model == 'custom') {
      ops.max = ops.bgs.length
    }
    var fn = {
      rand: function () {
        ops.bg = parseInt(Math.random() * ops.max);
        return ops.bg;
      },
      time: function () {
        setInterval(function () {
          fn.isChangeBg();
        }, ops.times)
      },
      contains: function (arr, obj) {
        var i = arr.length;
        while (i--) {
          if (arr === obj) {
            return true;
          }
        }
        return false;
      },
      isChangeBg: function () {
        fn.rand();
        if (ops.model == 'default') {
          if (ops.bgs.length == ops.max) {
            ops.bgs = [];
          }
          if (fn.contains(ops.bgs, ops.bg)) {
            fn.isChangeBg()
          } else {
            ops.bgs.push(ops.bg);
            fn.changeBg();
          }
        } else if (ops.model == 'custom') {
          if (ops.arr.length == ops.max) {
            ops.arr = [];
          }
          if (fn.contains(ops.arr, ops.bg)) {
            fn.isChangeBg()
          } else {
            ops.arr.push(ops.bg);
            fn.changeBg();
          }
        }
        //console.log(this)
      },
      changeBg: function () {
        switch(ops.model){
          case 'default':
            ops.url = 'url("./staic/images/index/bg' + ops.bg + '.jpg")';
            break;
          case 'custom':
            ops.url = 'url("' + ops.bgs[ops.bg] + '")';
            break;
        }
        $(ops.abs).fadeTo(ops.speed, ops.opacity, function () {
          $(ops.abs).css({
            'background-image': ops.url,
            'background-size': '100%',
            'background-position':'fixed',
            'background-repeat':'no-repeat',
            '-webkit-transition': 'background-image 0.5s',
            '-moz-transition': 'background-image 0.5s',
            '-ms-transition': 'background-image 0.5s',
            '-o-transition': 'background-image 0.5s',
            'transition': 'background-image 0.5s'
          });
        });
      }
    };
    fn.isChangeBg();
    fn.time();
    //console.log(ops.bg, ops.model, ops.url)
  };
})(jQuery);


HTML中只需引入这个JS文件就可以了
jquery.bgSlide.js

调用代码 :
[JavaScript] 纯文本查看 复制代码
 $('body').bgSlide();


完整演示Demo
http://demo.fedte.cc/libs/2016-04-01/home/index.html

演示代码中,因为图片太大,加载有点慢,如有疑问,请在下方回帖联系我
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复

使用道具 举报

2

主题

28

帖子

13

积分

前端入门

Rank: 1

积分
13
发表于 2016-4-3 09:52:12 | 显示全部楼层
啊啊啊啊,我何时才能熟悉面向对象编程。。。。
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复 支持 反对

使用道具 举报

94

主题

150

帖子

148

积分

管理员

会在前端的道路上一直走下去!

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

积分
148

社区QQ达人

 楼主| 发表于 2016-4-3 16:21:25 | 显示全部楼层
街角小林 发表于 2016-4-3 09:52
啊啊啊啊,我何时才能熟悉面向对象编程。。。。

很快的啊 多敲点列子 就很快的
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



Archiver|手机版|小黑屋|前端开发技术交流

Copyright © 2009-2015 前端开发技术交流 http://www.fedte.cn 版权所有 All Rights Reserved.

免责声明: 本社区不承担任何由社区会员所提供的信息和工具所引起的争议和法律责任。

GMT+8, 2020-10-27 08:16

快速回复 返回顶部 返回列表