web前端基于jquery的十种精美的效果与源码

1.jQuery圆形统计图（百分比）

今天我给大家介绍一款圆形统计图circliful，它基于HTML5的画布和jQuery，无需使用图像轻松实现圆形统计图，而且有很多属性设置，使用起来非常方便。

在线演示

源码下载

2.jQuery年月日（生日）选择器

我们在编辑用户资料时经常会遇到选择生日选项的问题，今天我给大家介绍如何使用js来实现年月日（生日）选择器，能够准确计算闰年的年月日，方便表单处理。

在线演示

源码下载

3.使用Skrollr创建视差滚动效果页面

视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。随着用户对视觉体验的要求不断提高，WEB开发者开始在网页中加入各种特效元素以满足用户的需求。今天这篇文章给大家推荐一个优秀的视差动画Javascript库——Skrollr.js

Skrollr是一个使用了HTML5和CSS3的轻量级JavaScript视差滚动类库。它是不依赖于其它框架的独立类库，可以让你快速打造出视差滚动效果。它可以让我们给任意元素设置关键帧的CSS属性，然后它会自动形成动画效果。更重要的一点是，使用此类库时不用写复杂的JS代码以及兼容主流浏览器，适配手机等移动终端等特性。

在线演示

源码下载

4.使用jQuery实现滑过图片展示信息效果

当要在有限的空间展示更多的信息时，我们经常会采取鼠标滑过弹出更多相关信息层，提高互动性。尤其可以应用在公司照片墙、招聘网站求职者信息展示等等场景。

本文结合实例和大家分享下使用jQuery实现滑过图片展示信息效果。当鼠标滑向照片时，会弹出对应的照片的详细介绍信息，请看演示效果：

在线演示

源码下载

5.谷歌地图插件Mapsed.js

我们在一些WEB项目中需要应用简单的地图，而且最好是可以自定义标注地点，最好是可以从本地数据库中读取并在地图上展示地点，那么谷歌地图插件Mapsed.js是比较好的选择，使用起来简单，无需注册地图接口之类的复杂过程，就能轻松的在网页上展示地图效果。

在线演示

源码下载

6.jQuery右下角悬浮广告

右下角悬浮广告是一种常见的网页广告展示方式，而且对用户浏览有干扰之嫌但对网站收益来说是很受站长们欢迎的。今天我给大家分享一个使用jQuery来实现网页右下角广告的实例。它的优点是可以从右下角缓慢升起，展示一定时间自动消失，并且可以改成网站消息提示窗口。

在线演示

源码下载

7.jQuery实现的全选、反选和不选功能

本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者。

在线演示

源码下载

8.jQuery+PHP掷色子抽奖

本文以大富翁游戏为背景，综合运用jQuery和PHP知识，设计出以掷色子点数来达成抽奖的效果，当然抽奖概率是可控的，开发者可以将本实例稍作修改即可运用到网站中的抽奖活动场景中。

在线演示

源码下载

9.掷色子猜大小游戏（可控制概率）

本文结合实例为大家讲解如何实现一个掷色子猜大小的游戏功能。上期我们给大家介绍了jQuery掷色子动画，本期在上期的基础上，涉及到HTML，CSS，jQuery以及PHP相关知识，文章重点关注后台PHP程序会根据用户选择的大小计算概率，控制最终掷出的点数，本例中用户猜中几率为20%。

在线演示

源码下载

10.jQuery掷色子动画

大家一定都玩过掷色子的游戏，今天我给大家分享的是如何使用jQuery来实现掷色子的动画效果，通过jQuery的animate()自定义动画函数并结合CSS背景图片切换实现的动画效果，后面helloweba还会有文章发布关于掷色子的抽奖程序。

实现原理：当色子掷出后，通过jQuery的animate()函数改变色子位移，中间加入延时效果，并变换色子背景，最终动画运行到随机产生的点数时停止，并显示掷出的点数。其实就是动画过程加入多个不同图片的帧（同flash动画影片中的帧），帧数越多效果越好，然后逐帧运行后就形成了动画效果。

在线演示

源码下载

未经允许不得转载：爱前端网 » web前端基于jquery的十种精美的效果与源码