开发者社区> 玄学酱> 正文

7款绚丽的jQuery/HTML5动画及源码

简介:
+关注继续查看

7款绚丽的jQuery/HTML5动画及源码

jQuery是一款非常流行的JavaScript框架,利用jQuery,我们可以制作简单的动画效果,但是结合HTML5,这样的动画效果就会变得更加出彩。本文分享了7款jQuery结合HTML5的动画以及源码下载。

1、HTML5/SVG实现布谷鸟时钟动画

这是一款非常有意思的HTML5动画,它是一个老式的时钟,有布谷鸟报时,情侣的浪漫舞蹈。

html5-svg-cuckoo

html5-svg-cuckoo

在线演示源码下载

2、HTML5/CSS3实现图片倒影3D效果

这款应用主要利用了CSS3的transform属性实现了图片的倾斜和倒影,动画效果也非常不错。

html5-css3-image-shadow

html5-css3-image-shadow

在线演示源码下载

3、jQuery图片放大预览插件

这款基于jQuery的图片放大预览插件,只需要将鼠标滑过缩略图,即可将当前区域的图片放大预览,这个功能一般在商品图片展示的时候非常有用。

jquery-image-zoom

jquery-image-zoom

在线演示源码下载

4、jQuery内容层叠滚动切换动画插件

这是一款很有创意的jQuery内容滑动动画,我们可以设置任意数量的文字层,让其层叠在一起,然后点击按钮让其出现层叠滚动切换的效果。

jquery-stack-text-slider

jquery-stack-text-slider

在线演示源码下载

5、jQuery文件夹管理插件

这款jQuery插件模拟了操作系统的文件管理系统,可以新建、删除和重命名文件夹。

jquery-dir-manager

jquery-dir-manager

在线演示源码下载

6、jQuery全屏广告图片焦点图

这款jQuery全屏广告图片焦点图插件也非常不错,图片切换时有淡出淡出的动画效果,并且也相当流畅。

jquery-full-ad-slider

jquery-full-ad-slider

在线演示源码下载

7、jQuery带格式验证的注册表单

这款jQuery表单的特点是带有严格的表单字段格式验证功能,比如电子邮箱的格式、用户名格式以及密码复杂度和长度等。

jquery-reg-form-validate

jquery-reg-form-validate

在线演示源码下载

原文发布时间:2015-01-12

本文来自云栖合作伙伴“linux中国”

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery——手风琴完美实现效果(不会出现重复点击动画还没加载完成)
手风琴完美实现效果(不会出现重复点击动画还没加载完成)
23 0
【jQuery动画】停止动画、淡入淡出、自定义动画
动画队列中所有动画都是按照顺序执行的,默认只有当前的一个动画执行完毕,才会执行后面的动画。为此,jQuery提供了stop()方法用于停止动画效果。通过此方法,可以让动画队列后面的动画提前执行。
29 0
【jQuery动画】显示与隐藏效果
在网页开发中,适当地使用动画可以使页面更加美观,进而增强用户体验。jQuery中内置了一系列方法用于实现动画,当这些方法不能满足实际要求时,用户也可以自定义动画。本期我们一起来了解一下显示与隐藏效果吧~
17 0
jQuery效果-动画
jQuery效果-动画
21 0
jQuery——动画,显示与隐藏,获取,添加
必需的 params 参数定义形成动画的 CSS 属性 可选的 speed 参数规定效果的时长,可以取以下值:“slow”、“fast” 或毫秒。 可选callback 参数是动画完成后所执行的函数名称
42 0
jQuery中的自带动画
jQuery中的自带动画 jQuery是一个非常强大的JavaScript库,它提供了很多非常有用的功能,其中包括动画。 在前端的实际开发中,我们经常会遇到一些动画效果,比如:鼠标移入移出,点击,滚动等等。这些动画效果,我们可以使用jQuery来实现。下面我们就来看看jQuery中的动画。
168 0
jquery动画与事件案例
jquery动画与事件案例
39 0
jQuery中的事件与动画
jQuery中的事件与动画
85 0
jQuery动画与事件概念以及语法
jQuery动画与事件概念以及语法
86 0
怎么设置jQuery中的事件和动画
怎么设置jQuery中的事件和动画
52 0
jQuery入门第二章(显示隐藏动画)
jQuery入门第二章(显示隐藏动画)
53 0
jQuery动画和事件
jQuery动画和事件
61 0
jQuery 编程 | jQuery 动画
jQuery提供了一些列的动画基本方法,同时也提供了自定动画方案.animate()。 .show() 当提供一个 duration(持续时间)参数,.show()成为一个动画方法。.show()方法将为匹配元素的宽度,高度,以及不透明度,同时进行动画操作。 持续时间是以毫秒为单位的,数值越大,动画越慢,不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。
48 0
对于jQuery选择器和动画效果停止动画的实战心得【前端jQuery框架】
对于jQuery选择器和动画效果停止动画的实战心得【前端jQuery框架】
43 0
jQuery动画代码详解
jQuery动画代码详解
91 0
+关注
玄学酱
这个时候,玄酱是不是应该说点什么...
文章
问答
视频
相关课程
更多
相关电子书
更多
23-Vue.js在前端...1506518547.pdf
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
相关实验场景
更多