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在线学习工具


五,游戏开发

 

1.   适用于移动端和现代互联网的超高性能专业级动画插件   https://www.tweenmax.com.cn/
posted @ 2019-10-11 14:07  武卡卡  阅读(353)  评论(0编辑  收藏  举报