jQuery多层级垂直手风琴菜单

13,462 人浏览

1条回复

2015-09-13 16:43:32

之前我们分享过一款类似的jQuery垂直手风琴菜单CSS3手风琴菜单下拉展开带弹性动画，这次分享的这款手风琴菜单是多层级的，你可以通过HTML结构生成任意层级的菜单。由于是基于jQuery的，因此这款手风琴菜单的兼容性还不错。

在线演示源码下载

纯CSS3实现幽灵漂浮动画

17,272 人浏览

1条回复

2015-09-12 11:28:21

这又是一款基于纯CSS3的动画特效，先是用CSS3绘制了一个“可爱”的幽灵，没用运用图片，其实用CSS3绘制一些简单的线条和图形非常简单。然后通过CSS3的动画属性对幽灵进行上下的漂浮，动画效果还是非常不错的。

pure-css3-ghost-float

在线演示源码下载

jQuery加入购物车商品飞入动画

8,991 人浏览

发表回复

现在网上商城很多，每一个网上商城都会有将商品加入购物车的功能，本文将要分享一个用jQuery实现的加入购物车商品飞入动画，与其他加入购物车效果不一样的是，当点击加入购物车，商品会自动飞入购物车里面，并通过抖动购物车来提示用户操作成功。

jquery-add-to-cart

在线演示源码下载

CSS3可旋转的卡通小鸟头像

5,601 人浏览

发表回复

这是一款很可爱的CSS3动画，关于HTML5小鸟的动画，大家可以去看看这个SVG HTML5可爱的小鸟卡通动画。今天要分享的这个也是基于纯CSS3实现的，只要我们将鼠标滑过小鸟头像，小鸟就会出现旋转的动画效果，非常可爱。

在线演示源码下载

jQuery悬浮标题的幻灯片播放焦点图淡入淡出动画

4,872 人浏览

发表回复

关于jQuery焦点图插件，html5tricks已经为大家分享过很多了。今天我们要来介绍一款很普通但相当实用的jQuery悬浮标题的幻灯片播放焦点图，焦点图十分简易，每张图片都可以有一个标题和简介内容，这些文字内容悬浮在图片下方。图片切换时也是简单的淡如淡出动画，这用jQuery是很容易实现的。

jquery-slider-float-title

在线演示源码下载

CSS3网站地图可视化生成器

9,080 人浏览

发表回复

2015-08-16 14:55:03

SlickMap CSS是一款利用CSS文件直接将网站地图（sitemap）转换为可视化网页图表导航的CSS框架，它可以让一个枯燥的sitemap XML文件或者HTML文件转换成让人容易理解的组织架构图，让你对网站有个一目了然的了解。然后SlickMap CSS是自动化的，您自需要用XML或者HTML元素将站点地图结构描述好，SlickMap CSS会帮你直接渲染。

slickmap-css-sitemap

在线演示源码下载

jQuery滑动杆实现购买日期选择

5,927 人浏览

发表回复

这是一款基于jQuery的滑动杆购买日期选择插件，它的外观仿的是阿里云的服务器购买日期选择界面。这款jQuery插件非常适合在一些虚拟产品购买页面上使用，它可以帮助你的用户快速选择产品的购买日期，十分方便。

jquery-sidebar-date-select

在线演示源码下载

CSS气泡提示框可自定义配置箭头

22,736 人浏览

2条回复

2015-08-09 15:57:52

今天我们要来分享一款基于纯CSS的气泡提示框，和之前分享的一款jQuery消息提示框插件Tipso类似，整个提示框由箭头和矩形框组成，并且气泡提示框的箭头可以有不同的方向。这款CSS气泡提示框由纯CSS完成，最大的特点就是可以自定义配置，包括文字颜色、背景颜色和箭头方向等。

CSS代码：

.arrow_box {
	position: relative;
	background: #88b7d5;
	border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(136, 183, 213, 0);
	border[......]

阅读全文>>

jQuery模拟抛物线轨迹动画

13,219 人浏览

发表回复

2015-08-02 23:30:16

利用jQuery和HTML5可以模拟很多数学中的函数图象，比如HTML5 Canvas正弦波动画。今天我们要介绍一个用jQuery实现简单的模拟抛物线轨迹的插件，可以开始和暂停抛物线的运动，以及重新设置抛物线的参数。

jquery-parabola

下面简单了解一下实现这个jQuery抛物线运动的过程。

HTML代码：

<div class="btns" style="margin-top:20px">
    <a href="javascript:;" id="run">run</a>
    <a href="javascript:;" id="reset">reset</a>    
    <a href="javascript:;" id="stop">stop</a>
    <a href="javascript:;" id="setOptions">setOptions</a>
</div>
<div id="boll" class="bol[......]

阅读全文>>