/web-skill

前端知识库

MIT LicenseMIT

web-skill

关于前端的技术文章,总结前端开发技巧,以及在实际开发中遇到的问题和解决方案。

目录

布局类

  1. vw-rem布局(移动端vw-rem布局)
  2. PC全屏翻页(PC自适应全屏翻页,基于swiper2)
  3. 横屏布局的旋转解决方案(rem布局,解决横屏布局的旋转问题)

视频类

  1. 移动端视频类video实现
  2. 移动端视频canvas实现(安卓下可以自动播放)

常用类库引用地址

  1. 常用类库引用地址

功能组件

  1. 图片序列帧(支持多图形式和雪碧图形式)
  2. 抽奖组件(包含圆形转盘抽奖和普通方形样式抽奖)
  3. 图片和绘图组件(包含图片编辑组件和绘图编辑组件)

效果组件

  1. 视差类组件
  2. 重力感应组件与应用
  3. 九宫格连线效果(九宫格样式扩展,支持Canvas和图片)

图片和绘图组件

  1. 图片编辑组件(支持图片移动、缩放、旋转、导出编辑后的图片base64)
  2. 绘图编辑组件(Canvas画笔绘图,支持导出base64)

视差类组件

  1. DOM视差组件(简单,轻量级的Parallax.js视差引擎,可以根据智能设备的方向作出反应,支持PC、移动端)
  2. 滚动视差效果(随着屏幕滚动展现视差效果,适用于移动端和PC端)

重力感应组件与应用

  1. 移动端重力感应(根据手机重力感应,显示页面不同位置)
  2. 重力控制屏幕滚动(移动端利用重力控制屏幕滚动,基于DOM)

常用组件的问题总结

  1. Swiper常见问题总结(关于Swiper的使用技巧、常用参数属性和方法说明、使用Swiper常见问题)

移动端常见问题总结

  1. 需要长按但不选中文本的解决方法
  2. 微信客户端二维码长按识别注意事项
  3. 安卓输入框弹出键盘遮盖住文本框的解决办法

构建工具

  1. 基于gulp的构建工具(包括css、js合并压缩、图片压缩(支持jpg、png、gif压缩)、保存代码时浏览器自动刷新、sass编译、生成雪碧图、自动生成版本号等)

  2. gulp开发打包工具