📋yuanaaa

【阅读笔记】

文件地址

【css】页面加载 loading 动画——种树

纯 css 实现，可萌了，已经用到了个人博客点这里查看效果

文件地址页面预览

【js】一个假的九宫格抽奖

简单实现，没有做封装

文件地址页面预览

使用说明

原生 js 实现，引用 JQ 只为消息提醒 layer 提供依赖；
CSS 用到了 flex 布局，需考虑兼容
可以设定以下参数
- 转多少圈后开始抽奖
- 各个奖品的概率
- 能够抽奖的次数

【js】面对对象版瀑布流

实现根据图片数据渲染瀑布流

文件地址页面预览

使用说明

默认参数调用方式如下：

var fall = falls.init('#root', {
    imgList: src
})     // src 为一个包含多个对象的数组，每个对象都含有'src','alt'属性；

支持图片数据新增时，渲染新增数据

fall.addImgReload(src);

完整说明点击这里

【js】面对对象版气泡背景生成

实现添加气泡背景

文件地址页面预览

使用说明

动画由CSS3实现，需添加CSS样式（见demo）
默认调用如下

bobbles.init(num, options);      // num 表示气泡数量      options 表示参数对象

可修改默认参数包含：宽度范围动画延迟范围动画速度（见demo）

【Polyfill】JS的兼容整理

之前一直在回避兼容问题，大部分代码都是依赖jquery，决定开始正视原生写法，暂时分成了两类

【补充类】：对没有该功能的版本进行补充

【兼容类】：对实现方式不一致进行兼容

持续更新

文件地址

【js】面对对象版轮播组件

非常感谢慕课网的《星级评分原理和实现》课程，名字看起来很基础，但是讲的东西超级实用

最近一直觉得自己的代码没有逻辑，且维护、复用、拓展都很复杂，看了很多面对对象的理论，具体下手写起来又不知道怎么办╮(￣▽￣")╭

这是通过课程学习后实现的第一版，后续会持续更新（最终目的要实现yuanaaa.js更新面对对象的3.0版本）

文件地址页面预览

18.11.10：实现初始版本；
18.11.11：新增父类继承，添加淡出淡入新模式
18.11.15：已经更新至yuanaaa.js的3.0版，此版demo不再更新

【工具配置】静态页面切图gulp配置

一套自用的便于静态页面切图的gulp配置，因为公司页面经常改动，没有添加压缩等功能

文件地址

主要功能

【browser-sync】--自动刷新、多端调试
【gulp-less】--less编译
【gulp-autoprefixer】--自动添加css前缀
【gulp-tinypng-compress/gulp-tinypng-nokey】--图片压缩

（gulp-tinypng-compress需要去TinyPNG官网申请key，gulpfile.js中的私人key已更换为*号，gulp-tinypng-nokey无需key）

【gulp-rev、gulp-rev-collector】--添加版本号
【gulp-sequence】--gulp的同步执行

使用方法

1、拷贝所有文件至项目文件夹
2、全局安装gulp

npm install gulp -g

3、在项目文件夹内运行以下命令

npm install

4、覆盖node_modules_revise文件夹中的文件至node_modules(此处对gulp-rev gulp-rev-collector进行了部分修改)

命令列表

// 启动文件监听 less 文件中 px 转换 rem , 同 gulp m
gulp
// 启动文件监听 less 文件中 px 转换 rem
gulp m
// 启动文件监听 不进行 px 转换
gulp pc
// 同步执行 添加css3前缀 添加版本号
gulp build
// 图片压缩1（需要key）
gulp tinypng
// 图片压缩2
gulp tp

注意事项

1、因为gulp-rev gulp-rev-collector进行了部分修改，所以gulp-rev建议版本为@8.0.0，gulp-rev-collector建议版本为@1.1.1，修改过程参考自此处
2、如需修改目录结构需对应修改gulpfile.js文件内容
3、px2rem 默认 1rem = 75px;