Web - 工具 、 库 和 兼容
一,工具 ├
1, vue-awesome-swiper 基于 Swiper4、适用于 Vue 的轮播组件,支持服务端渲染和单页应用。
2, http://www.spritecow.com/ 雪碧图背景定位工具
3, uuid (npm) 自动生成id
4,Animate.css 一款强大的预设css3动画库 , animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。
5,jQuery插件 http://www.jq22.com/jqueryUI-1-jq
6, Vant https://youzan.github.io/vant/#/zh-CN/quickstart 有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。
7, pixijs https://www.pixijs.com/ 超快的2D渲染引擎,
8,GSAP https://greensock.com/gsap/ 强大的2D动画引擎
9, Froala https://www.froala.com/wysiwyg-editor 超好用的富文本编辑器
10, Spine http://zh.esotericsoftware.com/ 一款针对游戏开发的 2D 骨骼动画编辑工具
11, Pixabay https://pixabay.com 是德国的一个免费高质量图片素材分享网。它是一个充满活力的创意社区,分享免费的图片和视频。所有的内容都是在Creative Commons CC0下发布的,这使得它们可以安全的使用,而无需为创作者署名——即使是出于商业目的。
12,SuperSlide http://www.superslide2.com 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。
网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决!
从此无需网上苦苦寻觅特效,无需加载n个插件,无需害怕代码冲突,你需要的只是一个SuperSlide!
还可以多个SuperSlide组合创造更多效果哦~
(兼容包括ie6的绝大部分浏览器)[当年的你是否这样?
13, FancyBox https://fancyapps.com/fancybox , 是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,该lightbox除了能够展示图片之外,还可以展示iframed内容, 通过css自定义外观。相对与Lightbox而言,阴影效果更好。但是比Lightbox绚丽。支持最新版本的FireFox, Safari 和 Opera,chrome ,还有 IE6 和 IE7。
14, x-admin 后台模板 http://x.xuebingsi.com/
15,亿图图示,https://www.edrawsoft.cn/lp/edraw.html?channel=baidu&renqun_youhua=1877792,是一款基于矢量的绘图工具,包含大量的事例库和模板库。可以很方便的绘制各种专业的业务流程图、组织结构图、商业图表、程序流程图、数据流程图、工程管理图、软件设计图、网络拓扑图等等。它帮助您更方便,更快捷的阐述设计思想,创作灵感。
16,bootstrap模板库 http://www.bootstrapmb.com/
17,layer 提示层 https://layer.layui.com/
18, vue-manage-system,一个基于 Vue.js 和 element-ui 的后台管理系统模板
19 , 快速开发 (1).Jeecg-boot、(2).renren-fast 、(3).vue-manager-system
20, dowebok https://www.dowebok.com/ 意为做好网站,为用户提供代码、素材、特效、教程、模板等建站服务
21,一款优秀的HTML5视频播放器框架:https://muiplayer.js.org/
二,库 ( 插件 )
1, glidejs 轮播组件 https://glidejs.com/
2, animejs JS控制html动画
3, Isotope 对元素进行排列和筛选
4, scrollrevealjs 当页面滑动到某一个元素的时候通过动画来展示这个元素 https://scrollrevealjs.org/
5, smooth-scroll 当点击导航链接时流畅的滑动到对应的元素
6, Headroom.js 是一个轻量级、高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应。此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了。为页面顶部多留些空间。在不需要页头时将其隐藏。 https://www.bootcss.com/p/headroom.js
三,处理兼容
1,html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素。
2,Respond.js 让ie6-8 支持 CSS媒体查询
3,Prefixr 处理CSS3跨浏览器兼容性的工具,Prefixr这个网站会自动检测你所粘贴的CSS代码,然后针对CSS3的特性加上各浏览器所支持的前缀。
4, caniuse 检查元素兼容性
5, jQuery Migrate https://plugins.jquery.com/migrate/ 是应用迁移辅助插件,是用于高级版本兼容低级版本辅助插件。
例如jQuery版本用的是1.x,计划升级到3.x,就可以在页面删除1.x版本,换成3.x版本,如果有脚本错误,
就引入jquery-migrate插件用于兼容低版本,同时也显示低版本方法替换成新版本方法的方案。
6,IETester :在开发人员开发新网站的时候,网站的兼容性确实很重要,如果网站上线了,由于兼容性的原因,造成浏览效果不佳,最终肯定会让你的网站死到起跑线上的,所以开发者们使用IETester进行网站的兼容性测试是很有必要的.
7,minmax.js 是一个用来解决 IE6 浏览器无法支持 css 的 max-width 和 max-height 属性这个问题所编写的JavaScript库,只需要在页面上增加如下代码,便可以支持 max-width 和 max-height 属性。
<!--[if lt IE 7]>
<script type="text/javascript" src="minmax.js"></script>
<![endif]-->
四,学习网站
1,蝴蝶教程 https://www.jc2182.com/css/css3-jiaocheng.html
2,武功秘籍大全 https://www.kancloud.cn/ghzz789/huangyaoshi/30718 专治html,css,javascript,php,linux等疑难杂症!特治thinkphp,laravel,jquery,bootstrap,easyui等重症难症。对laryer,validate,ueditor等能快速治疗,快速到什么程度呢?今天治疗,明天就上班。就是这么快。
3,Laravel 社区Wiki https://learnku.com/laravel/wikis , 由实用编码技巧和准确的通用信息组成。文章由社区用户依照规范撰写,并依赖于参与改进的方式不断进化。本 Wiki 的目标是:
- 简单易懂,可作为新手入门 Laravel 的第一份资料;
- 短小精湛、实用性强,可作为平时开发中的备忘查阅(请善用顶部搜索框);
- 准确性高,可作为参考资料在社区问答或文章中引用。
4, H5 plus 文档 http://www.html5plus.org/doc/
5, 前端学习网站 https://www.html.cn/
6. 地址:https://how2j.cn/ :一个 Java 全栈开发教程网站,内容全面,简洁易懂,非常适合入门
7. Learn Git Branching : 最好用的Git在线学习工具
五,游戏开发