阅读更多

5顶
0踩

Web前端

原创新闻 不容错过的jQuery图片动画及源码

2014-10-23 14:17 by 见习编辑 html5_dev 评论(3) 有5667人浏览

jQuery处理图片的例子特别多,因为图片动画特效可以让网页更加生动,当然,随着CSS3的的加入,jQuery在处理图片方面更为优秀,出来的效果也更加迷人。本文要分享一些基于jQuery的图片动画效果,并且提供实现的源代码。

1、jQuery文字描述悬浮焦点图宽屏展示

这次我们要来分享一款jQuery焦点图插件,这款jQuery焦点图插件有2个特点,第一是焦点图以宽屏的形式展现,第二是焦点图的图片上方悬浮着文字描述,并且可以在文字描述上点击切换按钮。焦点图整体非常大气,不仅可以通过左右按钮来切换,而且可以点击下面的按钮来切换至任意图片。

jquery-text-silder

在线演示        源码下载

2、jQuery水平滑动菜单 可筛选菜单项

今天我们要来分享一款很特别的jQuery菜单,整一个菜单项都是可以水平滑动的,并且每一个菜单项都有一个卡通的图标,非常可爱。另外,菜单项可以根据不同的分类筛选,很适合菜单项繁杂的网页应用,可以让菜单项整齐归类。

jquery-silder-menu

在线演示        源码下载

3、纯CSS3实现打火机火焰动画

这又是一款很酷的纯CSS3动画特效,它是一个可以点燃的打火机,当你用鼠标滑过这只打火机时,打火机就会打开,然后开始出现火焰燃烧的动画特效。另外要说明的是,整个动画都是利用纯CSS3实现的,没有一行JS代码,小伙伴们,这个CSS3动画是不是很酷?

pure-css3-lighter

在线演示        源码下载

4、jQuery实现马赛克图片拼接翻转动画

之前我们分享过很多炫酷的jQuery图片特效,有空大家可以看看。今天我们要再来分享一款基于jQuery的图片特效,它的效果是图片马赛克翻转动画,并且将这些马赛克块状图片拼接起来组成一张完整的图片,翻转动画非常的酷。

jquery-image-masaike-roll

在线演示        源码下载

5、jQuery原始图片对比插件

这是一款很实用的jQuery图片插件,它可以帮助你实现原图和经过处理的图片进行对比,这款jQuery插件一共有3中对比模式,主要是拖动中间的分割线来进行两张图片的细节对比。

jquery-image-compare

在线演示        源码下载

6、HTML5/CSS3图片过滤归类应用

今天我们要来分享一款基于HTML5和CSS3的图片特效,它可以很方便地将各种图片进行归类和过滤,在归类过滤的过程中,图片有非常酷的动画效果,并且,结合CSS3的特性,这里一共提供了3种炫酷的图片过滤动画。

html5-css3-image-filter

在线演示        源码下载

7、HTML5/CSS3超酷焦点图特效

今天要分享的这款HTML5/CSS3焦点图插件切换效果比较简单,但是外观和功能却十分强大。该CSS3焦点图在切换图片时,图片以淡入淡出的方式缩小消失并显示下一张图片。焦点图插件还拥有一套非常大气的前后翻页按钮,是一款非常实用HTML5/CSS3焦点图应用。

html5-css3-image-slider-nex-pre-button

在线演示        源码下载

以上就是这些很酷的jQuery图片动画效果,欢迎收藏分享。

本文链接:http://www.html5tricks.com/jquery-image-animations.html
本文作者:html5tricks – 超人

5
0
评论 共 3 条 请登录后发表评论
3 楼 向日葵上的小蜜蜂 2014-10-30 16:36
2 楼 snailke 2014-10-25 13:49
   
1 楼 jveqi 2014-10-23 22:21
 

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 前端不容错过的jQuery图片滑块插件

    2、jQuery动画焦点图 可自动播放图片 这是一款简单而实用的jQuery焦点图插件,焦点图不仅可以在播放图片的时候让图片有淡入淡出的动画效果,而且图片可以自动播放。该jQuery焦点图的每一张图片都可以设置文字描述,...

  • html5图片动画源码,不容错过的jQuery图片动画及源码

    本文要分享一些基于jQuery的图片动画效果,并且提供实现的源代码。1、jQuery文字描述悬浮焦点图宽屏展示这次我们要来分享一款2、jQuery水平滑动菜单 可筛选菜单项今天我们要来分享一款很特别...

  • 7个不容错过的jQuery图片动画及源码

    jQuery处理图片的例子特别多,因为图片动画特效可以让网页更加生动,当然,随着CSS3的的加入,jQuery在处理图片方面更为优秀,出来的效果也更加迷人。本文要分享一些基于jQuery的图片动画效果,并且提供实现的源代码...

  • 7个前端不容错过的jQuery图片滑块插件

    作为前端开发者,我们会碰到很到...1、jQuery多图并列焦点图插件今天我们要来分享一款比较特别的jQuery焦点图插件,它允许你自己定义当前画面的图片数量,在这个演示中,我们定义了3张图片一起显示。和其他jQuery焦...

  • 不容错过的七个jQuery图片滑块插件

    1、jQuery多图并列焦点图插件 今天我们要来分享一款比较特别的jQuery焦点图插件,它允许你自己定义当前画面的图片数量,在这个演示中,我们定义...2、jQuery动画焦点图 可自动播放图片 这是一款简单而实用的jQuery焦

  • 前端开发不容错过的jQuery图片滑块插件(转)

     1、jQuery多图并列焦点图插件 这是一款比较特别的jQuery焦点图插件,它允许你自己定义当前画面的图片数量,在这个演示中,我们定义了3张图片一起显示。和其他jQuery焦点图一样,这款焦点图插件的图片下方...

  • 盘点25个Html游戏Game源码网页爱好者不容错过

    盘点25个Html游戏Game源码网页爱好者不容错过

  • 圣诞树的雪花飘飘(结尾附源码)

    本文关键字:圣诞节、雪花、圣诞树、动画、前端。又是一年圣诞节,刚好赶上周末,狠狠的休息了两天。...作为勋章收割机,一看到活动有勋章送,那肯定是不能错过,想来写一个雪花飘落❄️配上圣诞树也是极好的~

  • JAVA上百实例源码以及开源项目

     Java局域网通信——飞鸽传书源代码,大家都知道VB版、VC版还有Delphi版的飞鸽传书软件,但是Java版的确实不多,因此这个Java文件传输实例不可错过,Java网络编程技能的提升很有帮助。 Java聊天程序,包括服务端和...

  • JAVA上百实例源码以及开源项目源代码

     Java局域网通信——飞鸽传书源代码,大家都知道VB版、VC版还有Delphi版的飞鸽传书软件,但是Java版的确实不多,因此这个Java文件传输实例不可错过,Java网络编程技能的提升很有帮助。 Java聊天程序,包括服务端和...

  • jQuery源码解析(3)—— ready加载、queue队列

    ready、queue放在一块写,没有特殊的意思,只是相对来说它俩可能源码是最简单的了。ready是在dom加载完成后,以最快速度触发,很实用。queue是队列,比如动画的顺序触发就是通过默认队列’fx’处理的。(本文采用 ...

  • jquery插件 源码

    下面是对Jquery几个经常用到的地方进行的增强。 功能是参考百度七巧板JS框架来完成的。 一、页面属性 $.page.getHeight():获取页面高度 $.page.getWidth():获取页面宽度$.page.createStyleSheet(options):在页面...

  • 日期选择器:jquery datepicker的使用

    在jquery ui中,提供了一个非常实用的日期选择器:datepicker,使用它能非常方便的展现日历中的日期,灵活配置相关选项,包括日期格式、范围等。我们经常在WEB应用中用到datepicker,比如要求用户输入日期进行相关...

  • 基于html+css+javascript+jquery制作北京景点介绍7页 WEB静态旅游景点区主题网页设计与制作...

    网页编辑:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。 3.知识应用:技术方面主要应用了...

  • 基于EasyX的贪吃蛇小游戏 - C语言

    基于EasyX的贪吃蛇小游戏 - C语言

  • Energy Core ECP5705-V01.pdf

    Energy Core ECP5705-V01.pdf

  • matlabGUI学生成绩管理系统pdf

    建立基于图形用户界面GUI的学生成绩管理系统,该系统能够实现学生成绩信息的增加、删除、查询(查询某门课所有学生的成绩并显示排名,查询某个学生的各科成绩并显示排名)、课程成绩统计最高分、最低分、平均分、方差、并显示相应的排名;绘制柱状图、条形图、饼状图、正太分布曲线等功能。 通过本实验使学生掌握图形用户界面GUI的操作和设计流程,并通过编写回调函数巩固前期的知识。

  • 高职教育品牌专业申报汇总表.doc

    高职教育品牌专业申报汇总表.doc

  • 游戏运营数据后台需求表.docx

    游戏运营数据后台需求表.docx

  • 国家开放大学数据库应用技术第三次形考作业3

    使用TOP和CASE的查询。写出实现如下查询的SQL语句。  (18) 列出“数据库基础”课程考试成绩前三名的学生的学号、姓名、所在系和考试成绩。  (19) 查询Java考试成绩最低的学生的姓名、所在系和Java成绩。  (20) 查询选修了Java的学生学号、姓名、所在系和成绩,并对所在系进行如下处理:   当所在系为“计算机系”时,显示“CS”;   当所在系为“信息管理系”时,显示“IS”;   当所在系为“通信工程系”时,显示“CO”;   对其他系,均显示“OTHER”。

Global site tag (gtag.js) - Google Analytics