HTML5 Canvas 圆形进度条显示数字百分比

之前我们分享过很多款外观和功能都不一的jQuery对话框和提示框插件，比如jQuery弹出层对话框外观优雅带遮罩和CSS3/jQuery自定义弹出窗口。这次要分享的同样是一款jQuery对话框插件，它的特点是弹出对话框的动画效果有很多种，演示中每一个按钮即一种动画效果。另外，插件还提供多种提示框动画插件，功能十分强大。

jquery-animated-window-popover

在线演示源码下载

jQuery层叠式图片切换焦点图插件

9,116 人浏览

发表回复

之前我们为大家分享过一款jQuery内容层叠滚动切换动画插件，主要是针对文字的层叠式切换。今天要介绍的也是一款层叠式切换插件，不过它是一款jQuery焦点图应用，除了当前的图片，我们可以看到所有图片的一部分，切换后显示下一张图片，切换动画是层叠式的效果。

jquery-layered-image-player

下面我们一起来看看实现这款jQuery层叠式图片切换焦点图的具体细节。

HTML代码

HTML代码非常简单，主要是使用了ul列表将所有图片列出来，当然需要在ul外面包一层div，并将div的class设置成carousel，因为后面jQuery调用时需要找到这个节点，具体代码如下：

<div class="carousel content-main">
	<ul class="list">
		<li><img src="img/photo_1.jpg"></li>
		<li><img src="img/photo_2.jpg"></li>
		<li><img src="img/photo_[......]

阅读全文>>

jQuery页面滚动元素展现隐藏动画插件

4,955 人浏览

发表回复

今天要给大家介绍一款超炫酷的jQuery动画插件，这款插件实现的功能是当页面向下滚动时，页面中的指定元素会以各种动画的方式展现出来，当页面向上滚动时，元素则会以各种动画方式隐藏。也就是说页面元素会随着可视范围的变化而出现展现隐藏的动画效果。

jquery-page-scroll-animation

在线演示源码下载

HTML5 Canvas 随机色彩光束爆炸动画特效

9,471 人浏览

发表回复

今天我们要给大家分享一款非常炫酷的HTML5 Canvas光束爆炸动画特效，它就像一朵光速爆炸开一样，动画效果非常绚丽。点击鼠标时，可以随机切换光速的颜色，当然你也可以在页面上放几个按钮，通过点击按钮来指定某一种颜色的光束。

html5-canvas-beam-explosion

在线演示源码下载

jQuery可拖拽的弹性分享按钮菜单

7,764 人浏览

发表回复

2017-02-01 10:15:58

今天我们要给大家介绍一款非常有特色的分享按钮，它和HTML5/CSS3社会化分享按钮类似，也以小图标的方式呈现。不同的是，这款分享按钮点击后可以弹性展开各个小图标，并且拖动按钮时每一个小图标也会跟随鼠标移动，效果非常酷。

在线演示源码下载

jQuery飘带式垂直手风琴下拉菜单

5,762 人浏览

发表回复

记得之前我们给大家分享过一些飘带式的菜单，比如CSS3 飘带菜单超酷3D CSS3菜单和CSS3飘带状多级下拉菜单；也分享过几款手风琴下拉菜单，可以在手风琴菜单栏目下查看。今天要分享的是一款飘带样式的垂直手风琴下拉菜单，恰好是两者的结合，效果非常不错。

下面我们一起来看看如何实现这款漂亮的jQuery飘带式手风琴下拉菜单。

HTML代码

由于使用了bootstrap框架，因此其HTML结构也需要一致，代码如下：

<div class="container">
	<div class="row">
		<div class="col-md-offset-3 col-md-6">
			<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
				<div class="panel panel-default">
					<div class="panel-heading" ro[......]

阅读全文>>

CSS3实现的公司发展历程时间轴

11,454 人浏览

发表回复

2017-01-31 14:29:29

今天我们要给大家分享一款CSS3和JavaScript实现的时间轴动画，这款时间轴动画有以下几个特点：1、页面加载完成后，时间轴会按节点逐步展开；2、可以自定义节点的数量和位置；3、拥有动态背景动画特效，就像飞舞的棉絮吸附着鼠标，非常炫酷。这款时间轴插件可以应用在公司发展历程功能上，更直观地介绍公司的发展历程。

css3-company-timeline

在线演示源码下载

jQuery/CSS3实现弹性动画展开菜单

7,225 人浏览

发表回复

2017-01-30 21:40:04

这是一款基于jQuery和CSS3的动画菜单插件，这款菜单的特点是点击按钮时可以展开菜单，展开的时候带有弹性的动画特效，效果相当酷。菜单项是一些小图标，当然你也可以使用图标结合文字的方式，由于隐藏/展开的方式相对节省空间，因此这款菜单可以应用在移动设备上。

下面我们一起来看看实现这款菜单的实现细节，或许对你学习前端，特别是学习jQuery有一定帮助。

HTML代码

菜单的HTML代码非常简单，用一个div模拟了初始的按钮，ul列表列出了所有菜单项图标，代码如下：

<div id="toolbar">
	<div class="button"></div>
	<ul class="icons">
		<li><i class="fa fa-home fa-2x" aria-hidden="true"></i></li>
		<li><i class="fa fa-user fa-2x" aria-hidden="true"></i&gt[......]

阅读全文>>