1.0.1 • Published 7 years ago

bgchange v1.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
7 years ago

bgChange vue2 Gemnasium license npm

这是一个网页背景切换的插件,可以选择图片背景或者是颜色背景,支持CSS3的写法,目前已发布到npm,插件简单易用,欢迎大家提issuespull request

How to use?

npm install bgchange

或者

<script src="http://ow287wwrv.bkt.clouddn.com/plugin/bgChange.min.js"></script>
<script src="http://ow287wwrv.bkt.clouddn.com/plugin/bgChange.min.js.map"></script>

举个栗子

import BgChange from './bgchange.js'
//start
var bgchange = new BgChange({
  image: false, //	default: false
  colorList: [
    'rgba(78, 56, 32, .8)',
    'rgba(70, 30, 45, .8)',
    'rgba(78, 56, 32, .8)',
    'rgba(89, 100, 105, .8)'
  ]
}).start();

//	or

var bgchange = new BgChange({
  image: true, //	default: false
  imagesList: [
    'http://ow287wwrv.bkt.clouddn.com/1.jpg',
    'http://ow287wwrv.bkt.clouddn.com/2.jpg',
    'http://ow287wwrv.bkt.clouddn.com/3.jpg',
    'http://ow287wwrv.bkt.clouddn.com/4.jpg',
    'http://ow287wwrv.bkt.clouddn.com/5.jpg',
    'http://ow287wwrv.bkt.clouddn.com/6.jpg',
    'http://ow287wwrv.bkt.clouddn.com/7.jpg',
    'http://ow287wwrv.bkt.clouddn.com/8.jpg',
    'http://ow287wwrv.bkt.clouddn.com/9.jpg',
    'http://ow287wwrv.bkt.clouddn.com/10.jpg',
  ]
}).start();

//stop
bgchange.stop();

Options

PropertyDescriptiontypedefault
duration背景切换动画持续时间(s)Number2
interval背景切换间隔时间(ms)Number3000
image是否是图片背景模式Booleanfalse
imagesList图片列表Array[]
colorList颜色列表Array[]
目前1.0.0版本可自定义参数较少,后期会不断的迭代补充

也可将整个项目clone下来,里面包含了开发文件和构建好之后的文件,按照下面的方法运行(基于vue2.0)

Build Setup

# install dependencies(先安装依赖)
npm install

# serve with hot reload at localhost:8080(本地运行)
npm run dev

# build for production with minification(如果你有更好的优化方案,请修改后运行下面的方法再`pull request`)
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

1.0.1

7 years ago

1.0.0

7 years ago