10款超炫的开源jquery的源码预览效果

小灰灰 2022-08-02 01:24 191阅读 0赞

**1.Flat Surface Shader – 超炫的 3D 模拟照明效果**  
  
  
       Flat Surface Shader 是一个超炫的 3D 模拟照明效果，可以配置使用基于 Canvas 的 2D 上下文或者基于 SVG 多边形数组绘制三角形。它还采用原生的 Float32Arrays 存储数字数据，进行高度优化的计算。可以调整颜色参数预览效果，而且可以导出图像。

[![094019hoaqawoh2zfqywyf.png][]][094019hoaqawoh2zfqywyf.png]

[在线演示][Link 1]  
[源码下载][Link 2]  
  
**2.Sidr – 创建侧栏和响应式菜单的最佳 jQuery 插件**  
  
       侧栏隐藏菜单是一个很好的方式，使得用户可以在需要的时候查看导航选项。而且这种方式对于响应式布局非常完美，因为节省空间。Sidr 是创建侧栏和响应式菜单的最佳 jQuery 插件，提供了多种菜单的显示方案。

[![094019610pe2r6pmrussnu.jpg][]][094019610pe2r6pmrussnu.jpg]

[在线演示][Link 3]  
[源码下载][Link 4]  
  
**3.Chardin.js – 很别致的 HTML 元素遮罩介绍效果**  
  
       有的时候，我们想要在页面上向用户展示某个元素的细节或者引导用户进行操作。Chardin.js 就是这样一款 jQuery 插件，可以帮助我们实现别致的遮罩介绍效果。它使用给定的元素的自定义数据属性“中的信息，一旦触发便会激活用于指引和介绍的遮罩效果。

[![094019yzmjo9ouq2iqy3w7.jpg][]][094019yzmjo9ouq2iqy3w7.jpg]

[在线演示][Link 5]  
[源码下载][Link 6]  
  
**4.IVORY – 轻量、灵活、功能强大的前端开发框架**  
  
       Bootstrap 和 Foundation 是目前使用最广发的前端开发框架，不过有的时候我们需要的是一个更轻量的方案，IVORY 也许就是你需要的。IVORY 基于12列的响应式网格布局，包含表格，按钮，表格，分页，拨动开关，工具提示，手风琴，选项卡等[网站][Link 7]中常用的组件和样式。

[![0940190jpt3gpt0e9p2t9g.jpg][]][0940190jpt3gpt0e9p2t9g.jpg]

[在线演示][Link 8]  
[源码下载][Link 9]  
  
**5.iCheck：超级精美的自定义复选框 & 单选按钮**  
  
       iCheck 是一套基于 jQuery 的自定义复选框和单选按钮，以避免在日常开发中重复造轮子。在数量庞大的浏览器，设备和它们的不同版本中，它提供了风格一致的外观。回调和方法可以用来方便地处理修改和自定义输入。

[![094019zudn1jodi1c5jkuz.png][]][094019zudn1jodi1c5jkuz.png]

[在线演示][Link 10]  
[源码下载][Link 11]  
  
**6.PathFinding.js – 综合性的 JavaScript 路径查找库**  
  
       PathFinding.js 是一个综合性的 JavaScript 路径查找库。这个项目的目的是提供一个可以很容易地纳入网页[游戏][Link 12]的路径查找库。它可以运行在 Node.js 或浏览器中。提供的在线[演示][Link 13]展示了算法是如何执行的。当[实例][Link 14]化路径查找器的时候，你可以传递额外的参数来表示具体的策略。

[![0940209b9rk5v2pv2zr992.jpg][]][0940209b9rk5v2pv2zr992.jpg]

[在线演示][Link 15]  
[源码下载][Link 16]  
  
**7.jQuery Unveil – 另一款非常轻量的延迟加载插件**  
  
       jQuery Unveil 是一款轻量的延迟加载插件，支持提供用于视网膜显示设备的高分辨率图像。这个插件非常有用，它能提高长网页中图像的加载性能，因为视口以外的图像（可见部分网页）将不会被加载，直到用户滚动到它们所在的区域。延迟加载有一些很酷的选项，如自定义效果，容器，事件或数据属性。如果你不想使用这些功能，你可以减小文件的大小，只留下必要的代码来显示图像。

[![094020zt5brmwbasge5kbx.jpg][]][094020zt5brmwbasge5kbx.jpg]

[在线演示][Link 17]  
[源码下载][Link 18]  
  
**8.使用 FlipClock.js 制作精美的时钟、定时器和倒计时功能**  
  
       FlipClock.js 被创建出来是因为其他的解决方案不够抽象，不能够在不重写的代码的情况下提供了深层次的自定义。有些库的参数过多，而另外一些则是脚本中的硬编码太多，不够灵活。在参考许多现有的解决方案的基础上，FlipClock.js 提供可扩展的 API ，能够创建任何形式的时钟、计数器或者倒计时功能，而且翻页效果很酷。

[![094020m8vhdakp8pydxv88.jpg][]][094020m8vhdakp8pydxv88.jpg]

[在线演示][Link 19]  
[源码下载][Link 20]  
  
**9.纯css3实现的颜色渐变按钮**  
  
       今天给大家带来一款纯css3实现的颜色渐变按钮。这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变。

[![094021zgg0ppoy74adwpp7.jpg][]][094021zgg0ppoy74adwpp7.jpg]

[在线演示][Link 21]  
[源码下载][Link 22]  
  
**10.jQuery & CSS 制作金属质感的选择按钮**  
  
       如果能把 CSS 运用好，我们创作出好的交互和效果的可能性大大增加。这篇文章中，我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果，绝对是超级精美的效果。

[![094021243xy2zz4bvy2bvx.jpg][]][094021243xy2zz4bvy2bvx.jpg]

[在线演示][Link 23]  
[源码下载][Link 24]  
  
>> 来源链接: [ http://www.i7758.com/archives/787.html][http_www.i7758.com_archives_787.html]

[094019hoaqawoh2zfqywyf.png]: http://www.html5cn.org/data/attachment/forum/201411/13/094019hoaqawoh2zfqywyf.png
[Link 1]: http://wagerfield.github.io/flat-surface-shader/
[Link 2]: https://github.com/wagerfield/flat-surface-shader/archive/master.zip
[094019610pe2r6pmrussnu.jpg]: http://www.html5cn.org/data/attachment/forum/201411/13/094019610pe2r6pmrussnu.jpg
[Link 3]: http://www.berriart.com/sidr/
[Link 4]: https://github.com/artberri/sidr-package/archive/1.1.1.zip
[094019yzmjo9ouq2iqy3w7.jpg]: http://www.html5cn.org/data/attachment/forum/201411/13/094019yzmjo9ouq2iqy3w7.jpg
[Link 5]: http://heelhook.github.io/chardin.js/
[Link 6]: https://github.com/heelhook/chardin.js/archive/master.zip
[Link 7]: http://www.html5cn.org
[0940190jpt3gpt0e9p2t9g.jpg]: http://www.html5cn.org/data/attachment/forum/201411/13/0940190jpt3gpt0e9p2t9g.jpg
[Link 8]: http://weice.in/ivory/demo.html
[Link 9]: https://github.com/kanthvallampati/IVORY/archive/master.zip
[094019zudn1jodi1c5jkuz.png]: http://www.html5cn.org/data/attachment/forum/201411/13/094019zudn1jodi1c5jkuz.png
[Link 10]: http://damirfoy.com/iCheck/
[Link 11]: https://github.com/damirfoy/iCheck/archive/master.zip
[Link 12]: http://www.html5cn.org/portal.php?mod=list&catid=19
[Link 13]: http://www.html5cn.org/portal.php?mod=list&catid=10
[Link 14]: http://www.html5cn.org/portal.php?mod=list&catid=17
[0940209b9rk5v2pv2zr992.jpg]: http://www.html5cn.org/data/attachment/forum/201411/13/0940209b9rk5v2pv2zr992.jpg
[Link 15]: http://qiao.github.io/PathFinding.js/visual/
[Link 16]: https://github.com/qiao/PathFinding.js/archive/master.zip
[094020zt5brmwbasge5kbx.jpg]: http://www.html5cn.org/data/attachment/forum/201411/13/094020zt5brmwbasge5kbx.jpg
[Link 17]: http://luis-almeida.github.io/unveil/
[Link 18]: https://github.com/luis-almeida/unveil/archive/master.zip
[094020m8vhdakp8pydxv88.jpg]: http://www.html5cn.org/data/attachment/forum/201411/13/094020m8vhdakp8pydxv88.jpg
[Link 19]: http://flipclockjs.com/
[Link 20]: https://github.com/objectivehtml/FlipClock/archive/master.zip
[094021zgg0ppoy74adwpp7.jpg]: http://www.html5cn.org/data/attachment/forum/201411/13/094021zgg0ppoy74adwpp7.jpg
[Link 21]: http://www.w2bc.com/demo/2014-11--11-color-button/index.html
[Link 22]: http://www.w2bc.com/DownLoad/Download/10449?key=80A387E7515F5DBE00C741C09EEFD354
[094021243xy2zz4bvy2bvx.jpg]: http://www.html5cn.org/data/attachment/forum/201411/13/094021243xy2zz4bvy2bvx.jpg
[Link 23]: http://www.yyyweb.com/demo/css3-checkbox/
[Link 24]: http://www.yyyweb.com/demo/css3-checkbox/css3-checkbox.rar
[http_www.i7758.com_archives_787.html]: http://www.i7758.com/archives/787.html