10个web前端基于jQuery动画插件及源码

首页 > 代码库 > 10个web前端基于jQuery动画插件及源码

10个web前端基于jQuery动画插件及源码

2024-08-04 05:46:10 222人阅读

1.超赞的页面加载进度自动指示和 Ajax 导航效果

在页面中引入 Pace.js 和您所选择主题的 CSS 文件，就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果。不需要挂接到任何代码，自动检测进展。您可以选择颜色和多种效果，有简约，闪光灯，MAC OSX，左侧填充，顶部填充，计数器和弹跳等等。

在线演示

源码下载

2.ProgressBar.js – 漂亮的响应式 SVG 进度条

ProgressBar.js 是一个借助动态 SVG 路径的漂亮的，响应式的进度条效果。使用 ProgressBar.js 可以很容易地创建任意形状的进度条。这个 JavaScript 库提供线条，圆形和方形等几个内置的形状，但你可使用 Illustrator 或任何其它的矢量图形编辑器创建自己的进度条效果。

在线演示

源码下载

3.TogetherJS:一个免费开源的JavaScript库

TogetherJS是一个免费、开源的 JavaScript 库，来自 Mozilla 实验室，可以实现基于 Web 的在线协作功能。把 TogetherJS 添加到您的网站中，您的用户可以在实时的互相帮助！当然还有很多其它的可以应用的场合，值得一试。

在线演示

源码下载

4.根据图片亮度智能切换元素样式

BackgroundCheck 是一个轻量的 JavaScript 库，能够根据元素后面的图片的亮度自动切换元素样式。例如在图片幻灯片功能中，根据图片亮度调整导航箭头的颜色，这样让图片和导航的颜色形成一定的对比度，更清晰。类似可以使用的地方还有固定导航，在滚动下拉的时候根据文本背面的图片自动修改颜色等等。

在线演示

源码下载

5.帮助自定义选择框样式的Javascript - DropKick.js

当你想要设计一个页面样式时，没有什么比表单更让人头疼了。而当你设计一个表单的样式时，最让你头疼的就应该非下拉框<select>莫属了。我们可以使用CSS来给<select>定一个样式，但是只用CSS的话，这里就会有很大的局限性。通常情况下，唯一的可行选择就是用JavaScript来做下拉框的样式。在这篇文章中，我们使用DropKick - 一个jQuery的插件，来创建我们的下拉列表。它做了什么呢？DropKick将<select>列表转换成完全自定义的HTML元素做的下拉列表，而当你选择了一个下拉选项时，这个选项对应的选项值会更新成表单的一部分。好了，现在让我们开始吧！

在线演示

源码下载

6.FullPage.js:轻松实现全屏滚动（单页网站）效果

FullPage.js 是一个简单而易于使用的插件，用来创建全屏滚动网站（也被称为单页网站）。除了可以创建全屏滚动效果以外，也可以给网站添加一些水平的滑块效果。能够自适应不同的屏幕尺寸，包括平板电脑和移动设备。

在线演示

源码下载

7.捕获键盘输入的 JavaScript 库

Keypress 是一个强大的 JavaScript 库，用于捕获键盘输入。这是一个有非常特殊的功能的输入捕获库，它是很容易掌握和使用，并且不依赖第三方库。在网站开发中，经常会碰到需要处理键盘输入的场景，处理起来繁琐。现在有了这个键盘输入处理的库就很方便了。

在线演示

源码下载

8.HTML(.js) – 最简单的方式操作 DOM 的 JS 库

HTML(.js) 是一个轻量的（压缩后~2kb） JavaScript 库，简化了与 DOM 交互的方法。这个 JavaScript 库的方法可读性很好，并具有搜索和遍历 DOM 的方法。相比 jQuery、YUI、MooTools 等 JavaScript 库已经有这样的功能，这个框架不包裹或隐藏原生 DOM，而是暴露和增强，而且非常轻量。