文档章节

炫酷实用 7款jQuery/HTML5图片应用

老鸟的空间
 老鸟的空间
发布于 2014/07/05 20:18
字数 980
阅读 361
收藏 0

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。

1、HTML5 3D衣服摆动特效 超酷HTML5 3D动画

前面我们介绍过很多HTML5 3D动画特效,最经典的要算HTML5 WebGL水面水波荡漾特效。今天我再向大家分享一款HTML5 3D衣服摆动动画特效,动画也是在HTML5 Canvas上完成,它模拟衣服晾在绳子上,点击鼠标可以让衣服摆动起来,就行风吹动它一样,非常逼真炫酷。

html5-3d-cloth

在线演示        源码下载

2、jQuery产品图片滑动展示动画

我们在电子商务网站上需要展示图片的时候,需要用到jQuery的产品图片展示插件会比较方便,今天分享的这款jQuery图片滑动展示动画就很好的解决了产品图片展示的效果。利用该插件,我们可以产品图片分组,然后每一组即可切换显示。

jquery-product-image-slider

在线演示        源码下载

3、仿QQ空间相册图片浏览jQuery插件

今天我们要来分享一款基于jQuery的相册图片浏览插件,它是一款仿QQ空间的相册浏览组件,点击缩略图即可弹出图片浏览窗口,这款jQuery相册图片浏览插件的特点是:1、支持左右键来切换图片;2、支持ESC键退出相册浏览模式;3、可传入自定义的文本描述。缺点是没有应用任何动画,使图片浏览的体验性不是很高,不过你可以通过利用jQuery动画或者CSS3来实现。

qzone-jquery-gallery

在线演示        源码下载

4、HTML5 3D旋转图片相册 可鼠标悬停

图片特效在HTML5应用中十分广泛,我们也在html5tricks上收集了不少HTML5图片特效,今天要分享的这款HTML5 3D旋转图片相册又非常绚丽,和之前分享的这款HTML5/CSS3 3D环形图片墙类似,也是一面立体的图片墙,图片不停的切换,鼠标滑过图片时即可激活图片查看。

html5-3d-images-gallery

在线演示        源码下载

5、jQuery全屏滑块焦点图 可自定义内容

之前我们已经分享过很多jQuery焦点图插件了,很多焦点图都非常实用,可以应用到自己的网站上去。这次要分享的也是一款基于jQuery的全屏方式滑块焦点图插件,滑块的内容可以自定义,可以是几张图片的组合,也可以是横幅广告。

jquery-full-image-slider

在线演示        源码下载

6、HTML5/CSS3淡入淡出滑块焦点图 非常清新

我们已经分享过几款简单的CSS3/jQuery焦点图插件,像HTML5结合jQuery实现图片滑块特效CSS3/jQuery全屏立体焦点图等,大家可以到焦点图栏目下查找。今天要分享的这款焦点图切换时有淡如淡出的动画效果,是利用HTML5和CSS3实现。

html5-css3-text-slider

在线演示        源码下载

7、HTML5 3D相册图片轮播动画

这是一款基于HTML5和CSS3的3D相册浏览插件,它可以将相册中的图片以3D的方式展示出来,并且你可以滑动下面的滑杆来滑动图片浏览,同时,我们也可以指定数字让其直接跳转到指定的图片。这款HTML5 3D图片轮播动画用起来非常棒。

html5-3d-gallery-animation

在线演示        源码下载

以上就是7款炫酷实用的jQuery/HTML5图片应用,欢迎收藏分享。

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


本文转载自:http://www.html5tricks.com/7-useful-jquery-html5-image.html

上一篇: js中的即时函数
下一篇: 即时函数加闭包
老鸟的空间
粉丝 7
博文 79
码字总数 7683
作品 0
海淀
程序员
私信 提问
程序猿必备的10款web前端动画插件十三

  1.jQuery圆形旋转切换菜单 带菜单项描述   jQuery有着无数的插件,菜单插件是jQuery插件中最多的,尤其是CSS3和HTML5的配合,让jQuery菜单变得更加丰富多彩。今天我们要给大家分享一款...

爱码农
2018/08/30
0
0
分享10款效果惊艳的HTML5图片特效

在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家。 1、HTML5 3D正方体旋转动画 很酷的3D特效 之前...

ruby_chen
2014/03/26
4.3K
1
精选7款绚丽的HTML5和jQuery图片动画特效

在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器、图片导航、3D图片动画等等。本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面、实...

yykj
2012/11/14
39.5K
19
精挑细选 8款HTML5/jQuery应用助网站走向高上大

在WEB3.0的时代,我们的网站不仅要实现实用价值,更要为用户设计优秀的用户体验。jQuery是一个不错的JS框架,结合目前最新的HTML5技术,我们可以将自己的网站脱胎换骨,立马走向高上大,至少...

yykj
2014/04/03
954
1
7 款灵巧实用的 CSS3 和 jQuery 插件工具

作为WEB开发前端开发者,大部分应该对jQuery比较熟悉,对免费开源的jQuery也用的非常多。但是随着CSS3标准的诞生和发展,很多jQuery插件也都纷纷应用了CSS3新标准,也因此让插件有更好的展示...

yykj
2012/12/03
3.7K
7

没有更多内容

加载失败,请刷新页面

加载更多

DLA SQL技巧:行、列转换和JSON数据列展开

1. 简介 在数据库SQL处理中,常常有行转列(Pivot)和列转行(Unpivot)的数据处理需求。本文以示例说明在Data Lake Analytics中,如何使用SQL的一些技巧,达到行转列(Pivot)和列转行(Unp...

阿里云官方博客
14分钟前
0
0
分布式数据库选型——数据水平拆分方案

概述 水平拆分的概念随着分布式数据库的推广已为大部分人熟知。分库分表、异构索引、小表广播、这些功能几乎是产品功能需求标配。然而有些客户使用分布式数据库后的体验不尽如意。 本文尝试从...

阿里云云栖社区
14分钟前
0
0
Swagger2常用注解说明

这里只讲述@Api、@ApiOperation、@ApiImplicitParams、@ApiImplicitParam、@ApiParam、@ApiModel、@ApiModelProperty、ApiResponses、@ApiResponse这几个常用的。 一、@Api 用在请求的类上,...

Ryan-瑞恩
15分钟前
0
0
DM 源码阅读系列文章(八)Online Schema Change 同步支持

作者:lan 本文为 DM 源码阅读系列文章的第八篇,上篇文章 对 DM 中的定制化数据同步功能进行详细的讲解,包括库表路由(Table routing)、黑白名单(Black & white table lists)、列值转化...

TiDB
24分钟前
1
0
使用nginx负载均衡登录后不能跳转的问题

upstream test-server { #ip_hash; server 192.168.0.1:8080 weight=10; server 192.168.0.1:8081 weight=10;} 在测试环境中模拟生产使用nginx做应用负载均衡,登录页面可以...

Jack088
33分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部