10款基于jquery实现的超酷动画源码
1.jQuery二级下拉菜单 下拉箭头翻转动画
之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽。但今天要介绍的这款jQuery二级下拉菜单外观很简洁,使用非常简单,它唯一的特点就是下拉菜单项的下拉箭头有翻转的动画特效。
![]()
2.jQuery层叠式翻页焦点图插件 可自动播放
今天我们要来分享一款很有特色的jQuery焦点图插件,它的图片切换方式是层叠的,很有立体感。这种层叠的动画效果我们在之前也分享过一点,比如这款CSS3图片层叠展开特效 可展开扇形效果。另外这款jQuery焦点图还支持自动播放模式。

3.jQuery双向滑动杆 设置数值百分比
今天我们要给大家分享的是一款简单的jQuery双向滑动杆插件,利用这个jQuery滑杆插件,我们可以很便捷地设置数值百分比,类似的插件我们在之前也有分享过,比如:jQuery滑动杆打分插件 可左右滑动和jQuery/CSS3带Tooltip的滑杆动画。如果你有更好的jQuery滑杆插件,欢迎与我们分享。

4.jQuery实用图片滑块焦点图 支持移动端滑动
关于jQuery焦点图插件我们以前已经分享过很多了,尤其是支持移动端滑动的jQuery焦点图,比如适应手机端的jQuery图片滑块动画。今天我们要再来介绍一款jQuery实用图片滑块焦点图,它也支持移动端的触屏滑动,这款插件并没有特别的动画效果,但方便实用。

5.jQuery图片垂直滚动焦点图 导航带图标
今天我们要再来分享一款很实用的jQuery焦点图插件,这款jQuery焦点图的图片是垂直分组滚动的,你可以自定义图片组,也可以定义图片组中图片的数量,鼠标滑过指定的导航上时,相应的图片组即可上下切换,另外,焦点图的切换导航上有小图标,显得更加美观。
![]()
6.jQuery垂直手风琴菜单 菜单项带小图标
关于手风琴菜单,我们在之前的文章中也已经分享过很多了,比如jQuery 3D 垂直多级菜单、jQuery多层级垂直手风琴菜单以及CSS3垂直手风琴折叠菜单。今天要介绍的这款jQuery垂直手风琴菜单的菜单项带有漂亮的小图标,让我们可以更直观的指导菜单项的功能。
![]()
7.HTML5翻牌消除小游戏
这是一款基于HTML5的翻牌游戏,当翻出的2张牌相同的话,就可以将牌消除。如果你对HTML5熟悉的话,可以自己扩大游戏的矩阵,让游戏难度稍稍加大。另外,这款HTML5游戏可能对你来说并没有太多用处,但是你可以学习里面的HTML5代码。

8.jQuery交互式分享按钮 可横向展开
之前我们为大家分享过很多炫酷的分享按钮了,比如纯CSS3实现分享按钮 包含常用社交网站按钮和HTML5/CSS3社会化分享按钮,都不仅很漂亮,而且都非常实用。这次要给大家介绍一款基于jQuery的交互式分享按钮,它的特点是点击分享即可横向展开全部社交网站相应的分享按钮。

9.jQuery打字机文字特效 可自定义打字参数
今天要向大家分享一款jQuery打字机文字特效插件,类似这样的jQuery插件我们以前没有分享过,因此这次隆重向大家推荐这款jQuery打字机插件,因为它不仅代码很小,而且可以进行灵活的参数配置,让我们开发者使用起来非常方便。

10.HTML5 Canvas气温折线图表 带Tooltip提示框
今天要给大家带来一款基于HTML5 Canvas的折线图表应用,它主要用来显示指定日期的气温变化趋势,当我们将鼠标滑过折线图上时,图表上即可显示一个Tooltip提示框,提示框中显示当前的天气状况及气温情况。当然这款HTML5图表也可以在其他地方使用。

本文固定链接: http://www.i7758.com/archives/2302.html
10款基于jquery实现的超酷动画源码的更多相关文章
- 10款基于jquery的web前端特效及源码下载
1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- 推荐9款使用CSS3实现的超酷动画效果
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...
- 10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
- 10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
- 基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效
分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效.该选项卡特效集合了扁平风格设计和按钮点击波特效.是一款设计的非常不错的Material Desig ...
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览 ...
- 基于jQuery左右滑动切换特效 附源码
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div ...
- 一个基于jQuery写的弹窗效果(附源码)
最近项目中频繁遇到需要弹出窗口的功能,一直使用浏览器默认的Alert和Confirm弹窗,感觉视觉效果不是那么好,而从网上下载的话又找不到合适的,找到的话有些也是十分臃肿,有时候感觉学习配置的功夫自己 ...
随机推荐
- zoj 3627 Treasure Hunt II (贪心)
本文出自 http://blog.csdn.net/shuangde800 题目链接:zoj-3627 题意 直线上有n个城市, 第i个城市和i+1个城市是相邻的. 每个城市都有vi的金币. ...
- Swift用UIBezierPath来画圆角矩形、自定义多路径图形
最好的特点就是可以自定义路径,设置圆角和描边都很方便,以下为代码和效果,均在playground中实现 1.首先实现一个圆角矩形,并对此路径描边,为其绘制一个轮廓. 1 2 3 4 5 6 7 8 9 ...
- 怎样通过Java程序提交yarn的mapreduce计算任务
因为项目需求,须要通过Java程序提交Yarn的MapReduce的计算任务.与一般的通过Jar包提交MapReduce任务不同,通过程序提交MapReduce任务须要有点小变动.详见下面代码. 下面 ...
- C Primer
如果主函数使用void main(),由于它不是当前标准强制的一个选项,因此在有些系统上不能工作,为了使代码变得简单,main函数中可以没有返回语句. 先声明变量是为了防止拼写错误导致定义一个新的变量
- Spring MVC @RequestMapping Annotation Example with Controller, Methods, Headers, Params, @RequestParam, @PathVariable--转载
原文地址: @RequestMapping is one of the most widely used Spring MVC annotation.org.springframework.web.b ...
- InActon-日志分析(KPI)
我参照的前辈的文章http://blog.fens.me/hadoop-mapreduce-log-kpi/ 从1.x改到了2.x.虽然没什么大改.(说实话,视频没什么看的,看文章最好) 先用mave ...
- 解析 iOS 动画原理与实现
这篇文章不会教大家如何实现一个具体的动画效果,我会从动画的本质出发,来说说 iOS 动画的原理与实现方式. 什么是动画 动画,顾名思义,就是能“动”的画.人的眼睛对图像有短暂的记忆效应,所以当眼睛看到 ...
- WWH学习模式
WWH是"What+Why+How"的简称,是对学习方法最完美的概括."如果不按照WWH这种模式来教学,90%的结果是老师没教好,学生学不好." 1.What( ...
- 【阿里云产品公测】PTS压力测试WP站搜索
[阿里云产品公测]PTS压力测试WP站搜索 作者:阿里云用户cnsjw PTS性能测试服务是一个非常非常强大的压力测试工具.可以模拟百人同时访问网站的情况,并监测ECS和RDS的各项指标,生成非常详细 ...
- 标签云 - jqcloud 用法
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...