阅读更多

0顶
1踩

Web前端

转载新闻 15 个有趣的 JS 和 CSS 库

2017-05-15 15:03 by 副主编 jihong10102006 评论(0) 有6730人浏览
时光飞逝, 每月 Tutorialzine 都会为大家分享一些有趣的前端库。那么在本月,又准备了哪些优秀的 Web 开发资源呢?前端儿,一起来瞧瞧吧!

1. Buefy

这是一个基于 Bulma 的 Vue.js 轻量级 UI 组件,而 Bulma 则是基于 Flexbox 的 CSS 库。Buefy 具备典型的 Web 应用程序所必备的所有组件,例如 modals、toast 以及 notifications 等动态元素,使开发人员可以快速添加任何用户界面到其现有的 Vue.js 项目。

2. HR.js

HR.js 是一个用于高亮并替换 DOM 中文本的零依赖库。它的 API 简直不能再简单了。你只需要使用 CSS 选择器来定位保存所需文本的 HTML 父元素,选择好要高亮的单词,并设置背景颜色,就可以搞定了。

3. React VR

React VR 是用于创建在 Web 浏览器中运行 VR 应用程序的框架。它将现代的 API(如 WebGL 和 WebVR)与 React 的声明式渲染进行搭配,从而产生可以通过各种设备使用的体验。

4. Tippy.js

这是一个用于动画工具提示的纯 JavaScript 库。Tippy.js 提供了丰富的悬停效果以及超过 20 个自定义选项。它也是超轻量级的库,并具备相当不错的浏览器兼容性。但如果出现个别浏览器不支持的情况,它会自动退回至常规的 title 属性。

5. Barba.js

Barba.js 是一个无依赖的 JavaScript 库,可用于在单页应用程序的视图间创建平滑的过渡效果。该库的逻辑是围绕 PJAX(推送状态 AJAX)来设计的,绕过正常有效的 URL,并通过 XMLHttpRequest 来加载新页面。Barba 还能确保通过 Push 状态的 API ,在应用程序的 URL 中可以正确的反映出状态的变化。

6. UIkit

UIkit 是一个优秀的轻量级前端框架,它包含了相应的 SVG 图标字体以及丰富的组件。无论是外观,还是框架,UIkit 的设计都十分的出彩。它不光具备统一的样式,还有易于记忆的 API,许多自定义选项以及有用的修饰器类,并且它的使用文档编写的也相当的出众。

7. Haul


Haul 是一个用于开发 React Native 应用程序的命令行工具。它可以直接替代 React Native packager,提供比 Webpack 更好的支持,并能够改进错误消息,大大减少编译时间。Haul 也拥有出色的使用文档,并且完全开源、可定制。

8. AcrossTabs

AcrossTabs 是一个用于跨浏览器 Tabs 间进行通信的 JavaScript 库,你可以使用它在不同的浏览器 Tabs 上打开或关闭网页。由于父 Tab 可以访问子 Tab 上有用的信息(例如 UID),所以它可以判断子 Tab 是否依旧打开,或者已关闭。

9. Stylelint

Stylelint 是一款现代的 CSS linter 工具,它可以帮助团队在样式表中执行固定的 CSS 标准。该库非常强大,它不仅可以让你禁止或设置白名单属性,还能够捕获错误以及识别 SCSS 语法。同时,Stylelint 也可完全定制,帮助你添加或去除一些规则选项。

10. Iconate

这是一个非常棒的 Vanilla JavaScript 库。通过点击图标,它能够帮你完成带有丰富平滑动画效果的图标转换。你也可以将 Iconate 与所有的 CSS 图标字体一同使用。即你只需在 HTML 中添加一个图标,并使用简单的 JavaScript API 来选择要将其转换为哪一种图标,同时选择相应的动画效果就搞定了。

11. React-Datasheet

React-Datasheet 是一个用于向应用程序添加类似 Excel 数据表的 React 组件。你可以对单元格进行自由编辑、分组选择、复制、粘贴、删除等操作。另外,在 GitHub 上还有三个有用的示例,供你参考。即基本的表,带有公式的表以及嵌套组件的表。

12. Pure CSS

这是一个轻量级、响应式的纯 CSS 模块框架。整个库在 gzip 压缩后,仅有 3.8 kb 的大小,如果你仅使用其中的一部分模块,那 CSS 真是小到没有朋友了!同时,它模块包括了基本样式集、响应格网、表单组件、按钮、表格和菜单,适用于任何的 Web 项目。

13. Simple Icons

Simple Icons 是一个涉及知名品牌(涵盖社交网络、应用程序、服务等)的免费图标合集。这些图标都是用 SVG 制作的,所以它们可以被缩放到任何尺寸,不用担心图片的像素。而大多数图标的大小都低于 500 字节。

14. Chroma.js


Chroma.js 是一个用于处理颜色的微型 JavaScript 库。它提供了丰富的 API,以及超过 50 种用于操纵颜色的功能,让你可以使用色彩模式切换,改变亮度和饱和度,创建渐变比例等许多实用的色阶处理方法。

15. Weex

Weex 是一个构建跨平台的移动应用程序框架,类似于 React Native,但适用于 Vue.js. 你可以利用 HTML、CSS 和 JavaScript 编写应用程序,并将其以 Android 和 iOS 客户端的形式呈现。该框架有许多内置的组件、API 和其他有用的功能。、

译文:15 Interesting JavaScript and CSS Libraries for May 2017
  • 大小: 23.5 KB
  • 大小: 29.3 KB
  • 大小: 12.6 KB
  • 大小: 27.2 KB
  • 大小: 24.1 KB
  • 大小: 26.8 KB
  • 大小: 9.6 KB
  • 大小: 31.9 KB
  • 大小: 16.5 KB
  • 大小: 23.8 KB
  • 大小: 20 KB
  • 大小: 17.3 KB
  • 大小: 150.8 KB
  • 大小: 10.4 KB
  • 大小: 197.3 KB
来自: zhihu
0
1
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 10个有趣的Javascript和CSS库

    Tailwind CSS Tailwind是用于构建自定义用户界面的实用CSS框架。...这是一个纯CSS库,用于创建漂亮的复选框和单选按钮。 它提供了不同的形状(正方形,曲线,圆形),选择方式(默认,填充,thick),颜色

  • 我发现了18个有趣的 JavaScript 和 CSS 库

    英文 |https://javascript.plainenglish.io/compilation-of-javascript-and-css-libraries-that-i-fou...

  • 2017 年 8 月:15 个有趣的 JS 和 CSS 库

    在本月,Tutorialzine 依旧为大家带来了一些有趣、实用的前端库,看看有哪些适合你的项目呢? 1. Titanic 这是一组自带悬停动画的精致 SVG 图标。但与大多数 Web 图标不同之处在于 - 它的动画是基于 JS 的,...

  • 推荐15个有趣的JS和CSS库

    本文精心挑选了一些优秀的Web开发资源。如: Propeller:为基于 Bootstrap 与谷歌的 ...BaguetteBox:是一个利用纯 JavaScript 编写的库,它可用于创建响应式灯箱画廊效果。 Whitestorm:是基于 Three.js 引擎用...

  • 【译】15个有趣的JS和CSS库(2018.7)

    Tutorialzine每月都会给我们精心挑选优秀的web开发资源,这些资源可以帮助我们解锁最新和最炫酷的网络开发姿势。前端er,让我们一起先睹为快吧! Polly.js polly是一个用于记录,重...

  • 15 个有趣的 JavaScript 与 CSS 库

    Wenk 是一个轻量级纯 CSS 写的文本工具提示库。虽然它的压缩版仅有700字节,但它依然能够管理并提供一些定制选项。诸如不同提示工具的大小、位置和文本对齐。 HERE: Wenk 项目地址 5.  CSS Loader ...

  • java技术交流: 10个有趣的Javascript和CSS库

    Java学习,肯定少不了Javascript和CSS库的身影,小编定时技术分享,送给每一个正奋斗在java前线的小伙伴们。 Tailwind CSS  Tailwind是用于构建自定义用户界面的实用CSS框架。 每个Tailwind小应用都有多种尺寸,...

  • 爱创课堂分享“15 个有趣的 JS 和 CSS 库”

     迎来了黄金10 月,在这收获的季节,我又为你们带来了哪些新鲜、有趣的前端资源呢?前端开发者们,一起来看看有木有你需要的前端库。 1.DisplayJS DisplayJS 是一个帮助你渲染 DOM 的简易...

  • 2017 年 9 月:15 个有趣的 JS 和 CSS 库

    (点击上方公众号,可快速关注)英文:Danny Markov 译文:IT程序狮http://www.jianshu.com/p/ec9ff744eb20如有好文章投稿,请...前端开发者们,一起来看看有木有你需要的前端库。1.DisplayJSDisplayJS 是一个帮助你渲

  • 15 个有趣的 JS 和 CSS项目

    Plank.js 优化了 Web 和移动浏览器的引擎,并提供了一个对 JavaScript 友好的开源代码库和 API。所以,当开发人员在制作 2D 游戏时,他们能更得心应手。 项目地址:【http://piqnt.com/planck.js/】 ...

  • 直播项目微信小程序源码(类似于微信视频通话).zip

    《直播项目微信小程序源码简介》 本资源是一份极具学习价值的直播项目微信小程序源码,类似于微信视频通话功能。它为开发者提供了一个完整的直播项目框架和实现逻辑,可用于深入研究直播技术在小程序中的应用。 该源码涵盖了直播项目的核心功能模块,包括视频采集、推流、播放等关键部分。通过对其代码结构的研究,开发者可以了解到如何利用微信小程序的相关接口和功能来实现流畅、稳定的直播体验。例如,在视频采集方面,源码展示了如何在小程序中调用设备摄像头,并进行实时视频数据的处理;在推流环节,详细阐述了如何将采集到的视频数据推送到服务器,以供其他用户观看;而在播放部分,则清晰地展示了如何在小程序界面上实现视频的流畅播放和控制。 这份源码不仅有助于开发者掌握直播技术在小程序中的实际应用,还能为进一步开发和优化直播类小程序提供宝贵的参考和借鉴,是一份不可多得的学习资源。

  • 详细阐述了中国智慧医疗建设的发展历程、现状、挑战及未来趋势 以下是文章的主要内容总结:

    内容概要:本文详细探讨了智慧医疗建设的历程、现状、挑战及未来发展趋势。智慧医疗建设经历了信息化、数字化和数智化三个阶段,政策、需求和技术是其发展的三大推动力。文章指出,当前智慧医疗已从数据收集与治理阶段迈向数据价值应用阶段,特别是在高质量数据库建设、云计算、人工智能等技术的推动下,实现了临床科研、药物研发、真实世界研究及数字营销等多个场景的商业化落地。此外,文中还分析了医疗信息化系统同质化、数据孤岛、互联互通等痛点,并提出了云化转型、新产品、新技术和新服务作为突破方向。最后,通过奈特瑞、医渡科技、东软集团三个企业案例,展示了不同企业在智慧医疗领域的创新实践。 适合人群:医疗信息化从业者、医疗行业研究人员、医疗机构管理者、医疗科技企业相关人员、政策制定者及对智慧医疗感兴趣的投资者。 使用场景及目标:①了解智慧医疗建设的阶段性特征和发展趋势;②掌握医疗信息化建设中的关键技术和应用场景;③探讨解决医疗信息化系统同质化、数据孤岛等问题的策略;④学习企业如何通过新产品、新技术和新服务实现突破,推动智慧医疗发展。 其他说明:本文通过对智慧医疗建设的深入剖析,强调了政策导向、技术创新和市场需求的重要性,为企业和政策制定者提供了宝贵的参考。同时,文章也揭示了未来智慧医疗发展的广阔前景,特别是在数据资产化和数智化应用方面的巨大潜力。阅读时应注意结合政策背景和技术发展趋势,关注行业动态和企业创新实践。

  • 电机设计领域中8级48槽永磁同步电机振动噪声分析的Motor CAD应用

    内容概要:本文详细介绍了利用Motor CAD软件对8级48槽永磁同步电机进行振动噪声分析的方法和步骤。主要内容涵盖前期准备工作,如软件环境搭建和基本原理的理解;建立电机模型的具体细节,包括定子和转子部分的参数设置;振动噪声分析的相关设置,特别是电磁力波的计算方法及其重要参数的设定;以及最终分析结果的解读,包括振动模态图和噪声频谱分析结果的应用。通过这些步骤,可以识别出导致较大振动和噪声的问题所在,并提出针对性的优化措施,如调整槽配合、优化永磁体形状等,以改善电机的整体性能。 适合人群:从事电机设计与优化的专业人士,尤其是对永磁同步电机振动噪声分析感兴趣的工程师和技术人员。 使用场景及目标:适用于希望深入了解和掌握Motor CAD软件在电机振动噪声分析方面应用的技术人员。目标是在实际工作中能够运用所学知识,提高电机的设计质量和性能,减少不必要的振动和噪声。 其他说明:文中提供了大量具体的代码片段和操作指南,帮助读者更好地理解和实践。同时强调了电磁-机械-声学耦合的重要性,指出结构设计对于降噪的关键作用。

  • 【计算机教育】计算机专业课后习题高效学习策略:构建知识体系与应对考试重点

    内容概要:本文是一篇面向计算机类专业学生的课后习题学习指南,强调课后习题对于构建专业知识体系的重要性。文章指出,做题不仅是为了完成任务或应付考试,更重要的是理解知识点背后的原理。文中详细介绍了不同课程类型的习题应采用的不同方法,如程序设计类需多动手调试,数据结构与算法类要手动画图并多敲代码等。同时提醒学生注意考试重点往往隐藏在课后题中,并提倡通过迭代学习巩固知识,避免常见错误。 适合人群:计算机类专业的学生,特别是那些在课后习题练习中遇到困难或希望提高学习效率的人群。 使用场景及目标:①帮助学生掌握正确的课后习题练习方法;②指导学生根据课程特点选择合适的做题策略;③提醒学生关注课后题中的潜在考试重点;④通过迭代学习的方式强化理解和记忆。 阅读建议:本文提供了实用的学习技巧和建议,读者应在实际做题过程中尝试运用这些方法,不断调整和优化自己的学习方式,以达到更好的学习效果。

  • 四旋翼无人机轨迹跟踪:PID与自适应滑模控制的Matlab仿真研究

    内容概要:本文详细探讨了四旋翼无人机(UAV)的轨迹跟踪控制技术,重点介绍了两种主流控制方法:PID控制和自适应滑模控制。首先,文章阐述了PID控制的基本原理及其在Simulink中的具体实现步骤,展示了如何通过调节PID参数实现稳定的轨迹跟踪,并提供了详细的Matlab代码示例。接着,文章深入讲解了自适应滑模控制的工作机制,强调了其对系统不确定性的强鲁棒性特点,并给出了相应的Matlab实现代码。此外,文中通过多种图表形式展示了不同控制方法下的仿真结果,直观比较了它们的优缺点。最后,作者总结指出,PID控制适合于系统模型较为确定的情况,而自适应滑模控制则更适合应对复杂的外部环境和不确定性因素。 适合人群:对无人机控制系统感兴趣的科研人员、工程技术人员及高校相关专业学生。 使用场景及目标:①帮助读者理解并掌握PID和自适应滑模控制的基本原理;②提供具体的Matlab/Simulink实现案例,便于读者进行实际操作练习;③通过对两种控制方法的对比分析,指导读者选择合适的控制策略应用于实际项目中。 其他说明:文章不仅提供了详尽的技术细节,还包括了许多实用的小技巧和经验分享,有助于提高读者的实际动手能力和解决问题的能力。

  • 电力电子领域LLC谐振变换器PFM+PSM混合控制仿真及其应用

    内容概要:本文详细探讨了LLC谐振变换器中变频移相(PFM+PSM)混合控制的仿真研究与实现。首先介绍了这种方法可以拓宽输入电压范围,确保MOS管的零电压开通(ZVS)和二极管的零电流关断(ZCS),从而降低开关损耗并提高变换器效率。接着展示了在Matlab/Simulink和Plecs环境下的具体实现步骤,包括关键参数设置、模式切换逻辑以及波形展示。文中还强调了参数整定的重要性,如谐振腔Q值的影响,并给出了具体的解决方案。此外,讨论了仿真过程中需要注意的问题,如仿真步长的选择和软开关条件的检测。 适合人群:从事电力电子设计的研究人员和技术工程师。 使用场景及目标:适用于需要设计高效、稳定电力转换系统的场合,特别是在输入电压范围较广的应用中,如光伏逆变器。目标是通过合理的控制策略实现更高的效率和平滑的工作状态。 阅读建议:读者应重点关注PFM和PSM模式的具体实现细节,尤其是两者之间的平滑切换逻辑,同时也要注意仿真工具的选择和参数调整技巧。

  • 【移动应用开发】VIP学习资源整合:涵盖Android、iOS、React Native及Flutter的开发工具、资源与社区

    内容概要:本文汇总了移动应用开发领域的VIP学习资源,涵盖从基础入门到进阶提高的全方位内容。基础资源方面,推荐了针对Android、iOS、React Native的多本经典书籍及Udemy、Coursera、edX等平台上的在线课程和YouTube视频教程,帮助初学者掌握UI设计、数据存储、前后端交互等基本技能。进阶资源则聚焦于高效编程、性能优化、架构设计等深层次主题,同样提供了书籍、在线课程和视频教程。对于跨平台开发,重点介绍了React Native和Flutter的相关学习资料。此外,还列举了Android Studio、Xcode等常用开发工具及其配套调试工具,以及Flutter Gallery、React Native Showcase等开源项目作为实践参考。最后,提及了Stack Overflow、Reddit - AndroidDev等社区论坛,为开发者提供交流平台。 适合人群:对移动应用开发感兴趣的初学者、有一定经验的研发人员及希望深入了解跨平台开发的开发者。 使用场景及目标:①初学者可以通过书籍、在线课程和视频教程系统学习移动应用开发的基础知识;②进阶者可利用进阶资源深入研究特定技术领域,如性能优化、架构设计等;③跨平台开发者可以借助React Native和Flutter的学习资料实现多平台应用开发;④使用推荐的开发工具和调试工具提高开发效率,解决实际问题;⑤通过开源项目和社区论坛获取实践经验和技术支持。 阅读建议:根据个人技术水平选择合适的资源进行学习,注重理论与实践相结合,积极参与社区交流,不断提升自己的移动应用开发能力。

  • 【深度学习框架】Caffe与Python接口的使用指南:从安装到模型部署的全流程解析

    内容概要:本文详细介绍了深度学习框架Caffe及其Python接口的使用方法。首先概述了Caffe的特点,如速度快、支持多种神经网络类型(CNN、RNN、LSTM),并提供预训练模型库。接着阐述了Caffe的安装步骤,包括系统要求、依赖库安装、源码编译及Python接口的配置。随后,文章通过多个示例展示了如何使用Python接口加载模型、预处理数据、执行前向传播和进行预测。此外,还介绍了模型训练流程,包括配置训练参数、使用Python接口训练模型、动态调整超参数等。最后,讨论了模型部署与应用,涵盖模型定义、训练、转换、加载、预测及性能评估等方面,并提供了常见问题的解决方案。; 适合人群:对深度学习有一定了解并希望使用Caffe框架进行模型开发的研究人员和工程师。; 使用场景及目标:①掌握Caffe框架的安装配置;②学会使用Python接口加载模型、预处理数据、执行前向传播;③理解模型训练流程,包括配置训练参数和动态调整超参数;④熟悉模型部署与应用,如模型定义、训练、转换、加载、预测及性能评估。; 阅读建议:由于Caffe的Python接口涉及较多的技术细节,建议读者在阅读时结合实际操作练习,逐步掌握每个步骤的具体实现方法。同时,可以参考官方文档和社区资源,加深对Caffe的理解和应用。

  • 基于西门子200PLC与组态王6.53的锅炉内胆温度控制系统设计与实现

    内容概要:本文详细介绍了使用西门子200PLC和组态王6.53实现锅炉内胆温度控制系统的全过程。首先,通过PLC采集温度数据并进行控制逻辑编程,确保温度保持在设定范围内。其次,组态王用于创建可视化界面,使用户能够实时监控和调整温度参数。文中还展示了具体的梯形图编程实例,如温度采集、控制逻辑、PID调节等,并讨论了常见的调试技巧和注意事项。此外,提供了运行效果视频,直观展示了系统的实际性能。 适合人群:从事工业自动化领域的工程师和技术人员,特别是熟悉PLC编程和HMI软件使用的专业人士。 使用场景及目标:适用于需要精确控制温度的工业应用场景,如化工、制药等行业。主要目标是提高温度控制的精度和稳定性,减少能源消耗,提升生产效率。 其他说明:文中提到的一些具体技术和参数(如PID参数、定时器设置等)可以根据实际情况进行调整优化。同时,强调了硬件配置和接地处理的重要性,以确保系统的可靠性和抗干扰能力。

Global site tag (gtag.js) - Google Analytics