web前端炫酷实用的HTML5应用和jQuery插件

又开始了新的一天,我们也将继续为大家分享许多优秀的HTML5应用和jQuery插件,作为前端开发者来说,这些资源可以帮助你在项目开发上派上用场。下面一起来看看这些炫酷而实用的HTML5应用和jQuery插件吧。

1、jQuery/CSS3图片洗牌切换动画特效

这是一款基于jQuery和CSS3的图片动画特效,该图片动画是洗牌的效果,我们只需点击切换按钮,即可一张张切换图片。另外,如果你长按住按钮不放,图片的洗牌效果就会更加明显和有趣,该jQuery图片特效一共有3中效果。

在线演示

源码下载

2、简单实用的jQuery横向图片滚动焦点图插件

之前我们分享了不少焦点图插件,包括jQuery焦点图和HTML5焦点图,效果都非常不错。今天的这款jQuery焦点图插件看起来非常简单,但是无论从外观和实用价值上看都相当不错。这款jQuery焦点图的图片是横向滚动的,两侧均有左右滑动按钮。

在线演示

源码下载

3、jQuery幻灯片播放焦点图插件

这又是一款基于jQuery的幻灯片焦点图插件,和之前分享的焦点图插件类似,图片都可以左右滑动。这款jQuery焦点图的优势在于不仅有一排小按钮切换图片滑动,而且可以直接点击图片来进行滑动切换。而且图片滑动相当流畅。

在线演示

源码下载

4、jQuery模拟Android HTC时间和天气画面

这次要分享的一款jQuery插件是模拟Android HTC手机的时间和天气画面,如果你的网络允许,该插件还可以ajax获取当地的天气情况。这款模拟Android HTC手机的jQuery插件从外观上看和Android待机画面非常相似,并且也可以实现滑屏特效。

在线演示

源码下载

5、CSS3 jQuery UI控制滑杆插件

今天我们要来分享一款基于CSS3和jQuery UI的控制滑杆插件,这款控制滑杆是在HTML5滑杆元素的基础上进行自定义CSS3渲染,所以外观更加漂亮。另外,这款控制滑杆插件是纵向的,当然你也可以通过设置让它水平放置。

在线演示

源码下载

6、纯CSS3绘制的黑色图标按钮组合

这是一款基于纯CSS3的图标组合,利用CSS3,我们基本可以在网页上绘制全部矢量图形,因为CSS3的出现我们可以绘制曲线了。这款图标是黑色风格的,有几个复杂的图案需要用多层CSS代码才能实现,大部分图标的绘制还是比较简单的。

在线演示

源码下载

7、纯CSS3 3D浮动按钮

这次我们来分享一款效果很酷的纯CSS3 3D浮动按钮,按钮是一个3D立体的悬浮圆形,按钮上面可以是文字和爱心图案,按钮底部还有阴影效果,显得很立体。另外,当把鼠标滑过按钮时,按钮就会下陷,就像在水面上下沉一样。

在线演示

源码下载

8、jQuery图片360度旋转 可跟随鼠标旋转

今天我们要再来介绍一款基于jQuery的360度图片旋转插件,这款jQuery图片旋转插件的原来和之前分享的类似,也是通过多张图片叠加播放实现的,通过jQuery实现方法也很简单。

在线演示

源码下载

本文固定链接: http://www.i7758.com/archives/1641.html

时间: 2024-08-14 03:46:32

web前端炫酷实用的HTML5应用和jQuery插件的相关文章

Web前端开发人员实用Chrome插件收集

越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录后的Chrome的,非常方便啊. Postman - REST Client Postman是Ajax开发的神器,对于Restful开发方式特别有帮助,可以用来模拟各种请求来测试API的正确性,比如用来模拟Ajax请求.它还支持认证,比如简单的用户名/密码,或者Oauth1.0.Rest Conso

jQuery炫酷插入和移动元素动画特效插件

Magic Move是一款效果非常棒的jQuery炫酷插入和移动元素动画特效插件.这款插件可以以非常平滑的方式在指定元素之前插入其它元素,并且当最右边的元素超出容器时会自动下移插入到下一行的第一个位置. 在线演示:http://www.htmleaf.com/Demo/201503061473.html 下载地址:http://www.htmleaf.com/jQuery/Layout-Interface/201503061472.html

jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩小等动画特效.使用Smoove页面滚动元素动画特效插件可以很轻松的制作出各种华丽的CSS3动画效果. 基本用法 $('.smoove').smoove(options); 上面的代码会在class为 smoove 的元素上使用默认参数初始化 jQuery Smoove. 你可以通过dat

炫酷实用的jQuery插件 涵盖菜单、按钮、图片

新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效,一起来看看吧. 1.CSS3书本翻页动画 书本翻页效果逼真 今天我们要分享一款炫酷而且实用的CSS3动画效果,它是模拟书本翻页的动画特效.当鼠标滑过书本右上角时,书本即可向前翻一页,而且翻页动画非常逼真.由于CSS3的运用,我们并不需要使用复杂的图片来制造逼真的书本效果,书本翻页可以很简单地完成.之

web前端入门到实战:HTML5的video和audio

从理论上来说,HTML5引入的<audio>和<video>元素,使用起来和<img>元素一样简单.对于支持HTML5的浏览器,不再需要使用插件(像flash)来在HTML文档中嵌入音频和视频: <audio src="background_music.mp3"'> <video src="news.mov" width=320 height=240> 实际上,使用这些元素的时候要更加巧妙.由于各家浏览器制

web前端入门到实战:HTML5实现首页动态视频背景

你想实现动态视频作为背景的首页吗?来,一起来学习,本文将带你一起实现H5动态视频背景: 首先网上找一段清晰的视频下载下来,最好是MP4格式的:下载好了之后我们新建一个html文件来写代码: html代码: <video id="v1" autoplay loop muted> <source src="./video2.mp4" type="video/mp4" /> </video> 一个video标签包裹着

web前端学习(五)(6)-- jQuery的扩展与noConflict

1.jQuery的扩展 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script src="myjQuery.js"

web前端学习(五)(8)-- jQuery元素遍历

1.向下遍历 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <style> #div1{ width:500px; height:2

web前端学习(五)(9)-- jQuery菜单

1.垂直菜单布局 2.垂直菜单实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> $(document).read