10款web前端基于jquery的页面代码

1.Jquery实现添加3D特效到你的幻灯片

此Jquery特效是一款效果非常棒的幻灯片作品,实现带有3D效果的功能,默认自带了3个Demo例子,分别为3种不同的特效。

1、带有左右滚动控制按钮和状态小图标

2、只有状态小图标控制图片播放和自动播放

3、带有左右滚动控制按钮、状态小图标和全屏显示

功能包括如下:

1、图片左右滚动

2、3D飞入飞出效果

3、带有更多链接功能

4、滑动效果

5、带左右控制按钮

6、自动播放功能

7、响应式布局(幻灯片会自适屏幕的宽度)

在线演示

源码下载

2.分享Jquery实现网格手风琴特效

此Jquery实现了网格手风琴特效,结合网格手风琴缩略图和手风琴面板的功能,是你展示你的图片网站一个非常有趣的方法。你可以选择使用XML或HTML。功能强大的API将允许进一步提高这个Jquery插件的功能,可以方便地集成到您自己的应用程序中。

功能如下:

1、支持XML和HTML

2、容易定制

3、在同一页的多个网格的手风琴缩略图

4、支持简单的文本或HTML文本字幕

5、你可以添加一个链接到每个面板

6、自动幻灯片模式

7、洗牌面板

8、公共方法,允许你使用外部输入的手风琴缩略图的控制(例如openpanel(3),nextpanel(),previouspanel(),getpanelat(2)等。)

9、回调函数

在线演示

源码下载

3.jQuery.mmenu – 用于移动 Web 项目的光滑菜单

jQuery.mmenu 插件是一款用于创建光滑的导航菜单的 jQuery 插件,只需要一行 JavaScript 代码就能为您的移动网站加上类似移动应用程序外观的滑动菜单。jQuery.mmenu 还提供了几个选项用于定制需要的菜单。大家可以参考学习一下。

在线演示

源码下载

4.使用FlipClock.js 制作精美的定时器

FlipClock.js 被创建出来是因为其他的解决方案不够抽象,不能够在不重写代码的情况下提供了深层次的自定义。有些库的参数过多,而另外一些则是脚本中的硬编码太多,不够灵活。在参考许多现有的解决方案的基础上,FlipClock.js 提供可扩展的 API ,能够创建任何形式的时钟、计数器或者倒计时功能,而且翻页效果非常酷。

在线演示

源码下载

5.jQuery Unveil 轻量的延迟加载插件

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

在线演示

源码下载

6.JS鼠标悬停开关灯渐变显示图片及点击后慢慢变大/变小显示的全屏相册动画

JS鼠标悬停开关灯渐变显示图片及点击后慢慢变大/变小显示的全屏相册动画特效源码,是一段初始化是全黑的缩略图列表,鼠标悬停时对应图片就会变亮并显示,然后鼠标划过时图片就会慢慢变暗变黑,点击查看图片后图片会慢慢放大全屏显示,再次点击则慢慢缩回原来的大小的代码。

在线演示

源码下载

7.jQuery实现的带缩略图和文字介绍的图片相册切换

jQuery实现的带缩略图和文字介绍的图片相册切换特效源码,是一段只支持手动切换而没有轮播效果的图片切换代码,并且此段图片切换代码在切换到最后一个图片并点击切换下一个时,会提示已是最后一张图片了,并提供上一个图集和下一个图集的选项。

在线演示

源码下载

8.MetricGraphics.js – 时间序列数据的可视化

MetricsGraphics.js 是建立在D3的基础上,被用于可视化和布局的时间序列数据进行了优化。它提供以产生一个原则性的,一致的和响应式的方式的图形常见类型的简单方法。该库目前支持折线图,散点图和直方图,以及地毯地块和基本线性回归功能。

在线演示

源码下载

9.CSS3鼠标悬停图片动画 多种文字动画效果

这是一款基于CSS3的图片鼠标悬停动画,这款CSS3应用的特点是当鼠标移动至图片上方时,在图片上将会出现自定义的动画,可以是文字动画、图标动画等。另外,这款CSS3鼠标悬停图片动画的形式非常丰富,基本可以满足你的需求。

在线演示

源码下载

10.jQuery动态标签插件 标签可新增和删除

今天要分享一款基于jQuery的标签插件,使用这款插件,我们可以动态增加和删除标签,在写博文的时候,我们为博文打标签就不用逗号或者分号隔开了,当你每新增一个标签时,该插件就会为你检查标签内容输入的正确性,并且在界面上显示输入的标签,删除标签也相当方便。

在线演示

源码下载

未经允许不得转载:爱前端网 » 10款web前端基于jquery的页面代码

赞 (0) 打赏


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏