前端开发框架、js插件、工具等

雨点打透心脏的1/2处 2022-09-24 06:29 183阅读 0赞

**一、前端开发工具**  
1、animation：animation-timing-function的cubic-bezier函数：自定义速度模式的工具网站  
地址：[http://cubic-bezier.com/\#.23,.66,.76,.52][http_cubic-bezier.com_.23_.66_.76_.52]  
2、前端代码在线编辑以及查看网站  
（1）codepen地址：[http://codepen.io/][http_codepen.io]  
（2）jsfiddle地址：[https://jsfiddle.net/][https_jsfiddle.net]  
3、想要看代码呈现的效果，可以在这里查看（发现自己根本发布不了相关代码，每次把前端代码传进去就石沉大海了）  
[http://www.jq22.com/][http_www.jq22.com]  
4、网站模板  
[http://www.cssmoban.com/][http_www.cssmoban.com]

**二、UI模板**  
1、UI中国  
地址：[http://www.ui.cn][http_www.ui.cn]  
2、UE设计平台  
地址：[http://www.uehtml.com][http_www.uehtml.com]  
3、UI制造者  
地址：[http://www.uimaker.com][http_www.uimaker.com]  
4、Hiiishare  
地址：[http://www.hiiishare.com][http_www.hiiishare.com]  
5、学UI网  
地址：[http://www.xueui.cn][http_www.xueui.cn]

**三、图标**  
1、小图标网站（阿里巴巴图标库）  
[http://www.iconfont.cn/][http_www.iconfont.cn]  
2、font awesome：字体图标  
官网：[http://fontawesome.io/][http_fontawesome.io]  
中文开发文档：[http://fontawesome.dashgame.com/\#getstart][http_fontawesome.dashgame.com_getstart]  
3、小图标  
地址：[http://www.easyicon.net/iconsearch/arrow][http_www.easyicon.net_iconsearch_arrow]

**四、图片**  
1、图片由多个小图整合成一张大图  
地址：[http://csssprites.com/][http_csssprites.com]  
2、png压缩（注：发现这真是个宝贝啊，之前一直存为png-8，然后再消除杂边，存出来虽然变小了，但是图片周边都不够圆滑了，这个网站存出来的图片，大小缩小了，但是图片质量完全没有下降，赞）  
地址：[https://tinypng.com/][https_tinypng.com]

**五、css**  
1、animate.css  
动画效果查看：[http://www.dowebok.com/demo/2014/98/][http_www.dowebok.com_demo_2014_98]  
作用：现成的各种css动画，添加上定制的class就可以使用其中的效果  
2、按钮生成工具  
网址： [http://www.wzsky.net/html/Website/Experience/117609.html][http_www.wzsky.net_html_Website_Experience_117609.html]  
3、aos  
页面滚动动画库

**六、前端开发js插件**  
1、iSlider.js  
官网： [http://be-fe.github.io/iSlider/][http_be-fe.github.io_iSlider]  
作用：手机左右滑动翻页  
2、iScroll.js  
官网：[http://cubiq.org/iscroll-5][http_cubiq.org_iscroll-5]  
官网开发文档：[http://iscrolljs.com/][http_iscrolljs.com]  
中文开发文档（仅供参考）:[http://www.cnblogs.com/asqq/archive/2012/04/23/2466132.html][http_www.cnblogs.com_asqq_archive_2012_04_23_2466132.html]  
作用：用于移动设备web开发。可用于缩放、下拉刷新、滑动切换等。  
3、zepto.js  
官网：[http://www.zeptojs.cn/][http_www.zeptojs.cn]  
中文手册（仅供参考）：[http://www.runoob.com/manual/zeptojs.html][http_www.runoob.com_manual_zeptojs.html]  
作用：类似于jquery，主要用于移动客户端  
4、touch.js  
官网：[http://touch.code.baidu.com/][http_touch.code.baidu.com]  
作用：移动设备上的手势识别与事件库，滑动，拖动等事件  
5、reactNative.js  
官网：[http://facebook.github.io/react-native/docs/getting-started.html][http_facebook.github.io_react-native_docs_getting-started.html]  
中文开发文档：[http://reactnative.cn/][http_reactnative.cn]  
作用：前沿js为os、android编写跨平台app  
6、swiper.js  
官网：[http://www.swiper.com.cn/][http_www.swiper.com.cn]  
作用：图片轮播，支持手势滑动，但是没有iSlider.js那么顺畅。  
7、exif.js  
开发文档：[http://code.ciaoca.com/javascript/exif-js/][http_code.ciaoca.com_javascript_exif-js]  
作用：获取图像的元数据。  
8、新手引导插件  
①十多款：[http://www.w3cplus.com/source/best-site-tour-jquery-plugin.html][http_www.w3cplus.com_source_best-site-tour-jquery-plugin.html]  
②intro.js：[http://introjs.com/][http_introjs.com]  
③bootstro.js：[http://clu3.github.io/bootstro.js/][http_clu3.github.io_bootstro.js]  
9、地图库  
①leaflet.js: [http://leafletjs.com/][http_leafletjs.com]

**七、服务器**  
新浪云计算地址：[http://t.cn/Rqme3R8][http_t.cn_Rqme3R8]

**八、前端框架**  
1、bootstrap  
官网：[http://getbootstrap.com/][http_getbootstrap.com]  
中文文档（仅供参考）：[http://www.runoob.com/bootstrap/bootstrap-tutorial.html][http_www.runoob.com_bootstrap_bootstrap-tutorial.html]  
2、SUIMobile  
官网：[http://m.sui.taobao.org/getting-started/][http_m.sui.taobao.org_getting-started]  
3、Ionic  
官网：[http://www.ionic.wang/js\_doc-index.html][http_www.ionic.wang_js_doc-index.html]  
作用：ionicframework，一款接近原生的h5移动app开发框架

**九、大神护体，走遍天下都不怕**  
1、张鑫旭-鑫空间-鑫生活  
[http://www.zhangxinxu.com/wordpress/][http_www.zhangxinxu.com_wordpress]  
2、叶小钗-博客园  
[http://www.cnblogs.com/yexiaochai/][http_www.cnblogs.com_yexiaochai]

**十、博客园，开发人员嬉戏游玩的天地，多涉猎，专注于少部分精品**  
1、web前端开发  
[http://www.css88.com/][http_www.css88.com]  
2、web技术分享  
[http://www.helloweba.com/][http_www.helloweba.com]  
3、前端开发博客  
[http://caibaojian.com/browser-ios-or-android.html][http_caibaojian.com_browser-ios-or-android.html]

**十一、杂**  
1、移动端适配  
移动端高清、多屏适配方案  
地址：[http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme 3041][http_www.html-js.com_article_Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme 3041]

[http_cubic-bezier.com_.23_.66_.76_.52]: http://cubic-bezier.com/#.23,.66,.76,.52
[http_codepen.io]: http://codepen.io/
[https_jsfiddle.net]: https://jsfiddle.net/
[http_www.jq22.com]: http://www.jq22.com/
[http_www.cssmoban.com]: http://www.cssmoban.com/
[http_www.ui.cn]: http://www.ui.cn
[http_www.uehtml.com]: http://www.uehtml.com
[http_www.uimaker.com]: http://www.uimaker.com
[http_www.hiiishare.com]: http://www.hiiishare.com
[http_www.xueui.cn]: http://www.xueui.cn
[http_www.iconfont.cn]: http://www.iconfont.cn/
[http_fontawesome.io]: http://fontawesome.io/
[http_fontawesome.dashgame.com_getstart]: http://fontawesome.dashgame.com/#getstart
[http_www.easyicon.net_iconsearch_arrow]: http://www.easyicon.net/iconsearch/arrow
[http_csssprites.com]: http://csssprites.com/
[https_tinypng.com]: https://tinypng.com/
[http_www.dowebok.com_demo_2014_98]: http://www.dowebok.com/demo/2014/98/
[http_www.wzsky.net_html_Website_Experience_117609.html]: http://www.wzsky.net/html/Website/Experience/117609.html
[http_be-fe.github.io_iSlider]: http://be-fe.github.io/iSlider/
[http_cubiq.org_iscroll-5]: http://cubiq.org/iscroll-5
[http_iscrolljs.com]: http://iscrolljs.com/
[http_www.cnblogs.com_asqq_archive_2012_04_23_2466132.html]: http://www.cnblogs.com/asqq/archive/2012/04/23/2466132.html
[http_www.zeptojs.cn]: http://www.zeptojs.cn/
[http_www.runoob.com_manual_zeptojs.html]: http://www.runoob.com/manual/zeptojs.html
[http_touch.code.baidu.com]: http://touch.code.baidu.com/
[http_facebook.github.io_react-native_docs_getting-started.html]: http://facebook.github.io/react-native/docs/getting-started.html
[http_reactnative.cn]: http://reactnative.cn/
[http_www.swiper.com.cn]: http://www.swiper.com.cn/
[http_code.ciaoca.com_javascript_exif-js]: http://code.ciaoca.com/javascript/exif-js/
[http_www.w3cplus.com_source_best-site-tour-jquery-plugin.html]: http://www.w3cplus.com/source/best-site-tour-jquery-plugin.html
[http_introjs.com]: http://introjs.com/
[http_clu3.github.io_bootstro.js]: http://clu3.github.io/bootstro.js/
[http_leafletjs.com]: http://leafletjs.com/
[http_t.cn_Rqme3R8]: http://t.cn/Rqme3R8
[http_getbootstrap.com]: http://getbootstrap.com/
[http_www.runoob.com_bootstrap_bootstrap-tutorial.html]: http://www.runoob.com/bootstrap/bootstrap-tutorial.html
[http_m.sui.taobao.org_getting-started]: http://m.sui.taobao.org/getting-started/
[http_www.ionic.wang_js_doc-index.html]: http://www.ionic.wang/js_doc-index.html
[http_www.zhangxinxu.com_wordpress]: http://www.zhangxinxu.com/wordpress/
[http_www.cnblogs.com_yexiaochai]: http://www.cnblogs.com/yexiaochai/
[http_www.css88.com]: http://www.css88.com/
[http_www.helloweba.com]: http://www.helloweba.com/
[http_caibaojian.com_browser-ios-or-android.html]: http://caibaojian.com/browser-ios-or-android.html
[http_www.html-js.com_article_Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme 3041]: http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041