10款基于jquery的web前端特效及源码下载

1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. 在线演示一在线演示二在线演示三源码下载 2.使用Ctrl+Enter提交表单我们发表微博或论坛发帖时,在内容输入框中输入完内容后,可以点击提交按钮来发表内容.可是,如果你够懒 ,你可以不用动鼠标,只需按住键盘上的Ctrl+Enter…

10款基于jquery的web前端动画特效

1.jQuery横向手风琴图片切换动画之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要介绍的也是一款基于jQuery的横向手风琴图片切换动画,鼠标滑过图片时即可展开,并且图片上方有文字标题,非常实用. 在线演示源码下载 2.jQuery/CSS3渐变颜色拾取器之前我们向大家分享过一款功能十分强大的jQuery颜色拾取器,支持透明度的选取.今天要为大家介绍的同样是一款基于jQuer…

10款基于jquery实现的超酷动画源码

1.jQuery二级下拉菜单下拉箭头翻转动画之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款jQuery二级下拉菜单外观很简洁,使用非常简单,它唯一的特点就是下拉菜单项的下拉箭头有翻转的动画特效. 在线演示源码下载 2.jQuery层叠式翻页焦点图插件可自动播放今天我们要来分享一款很有特色的jQuery焦点图插件,它的图片切换方式是层叠的,很有立体感.这种层叠的动画效果我们在之前也分享…

8款基于Jquery的WEB前端动画特效

1.超炫酷的30个jQuery按钮悬停动画按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮时,按钮的背景就会播放不同的动画特效.这款jQuery按钮插件的使用方法也很简单,给按钮指定一个类,然后用一行JS代码初始化即可. 在线演示源码下载 2.HTML5 Canvas水波纹动画特效 HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画…

10款基于HTML5+CSS3实现的超酷源码动画

1.基于Bootstrap的jQuery登录表单这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图片,同时还有HTML5表单字段的简单验证,CSS3的使用,让整个登录表单的投影显得更加立体. 在线演示源码下载 2.很酷的CSS3多窗口邮件阅读器这是一款非常炫酷华丽的CSS3邮件阅读器界面,它的特点是你可以同时点开多个邮件,而不必跳转页面.当你阅读完后可以点击关闭按钮关闭当前邮件的窗口.对于这…

基于jQuery左右滑动切换特效附源码

分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div class="bodyCon08"> <div class="students"> <div id="four_flash"> <div class="flashBg&qu…

10 个基于 jQuery 的 Web 交互插件推荐

英文原文:10 jQuery for Web Interaction Plugins “用户交互”在现代的 Web 设计中占据了很大比例,这是互联网产品不可或缺的关键,对 Web 设计师也提出了更高的要求. 本文整理了 10 款基于 jQuery 的 Web 交互插件,可以帮助你提高工作效率,或带给你一些设计灵感. 1. Redactor:奇妙的所见即所得编辑器该工具有一个非常好的 API,允许你根据需要进行定制. 源码 / 演示 2. elFinder:基于 web 的文件管理工具…

web前端的十种jquery特效及源码下载

1.纯CSS3实现自定义Tooltip边框涂鸦风格这是一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可以用CSS3来自定义边框,边框呈涂鸦风格.用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小. 在线演示源码下载 2.jQuery矢量SVG地图插件JVectorMap JVectorMap是一款基于jQuery的矢量地图插件,它是基于SVG结构的,和其他jQuery地图插件不同的是…

10 款基于 jQuery 的切换效果插件推荐

本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现页面内的元素淡入淡出效果. 源码/演示 2. HighlightFade 该插件可以实现高亮.缩放等效果. 源码/演示 3. Dynamic Page / Replacing Content 使用按钮实现网页内容的动态切换. 源码 / 演示 4. jqFancyTransitions 这是一个易于使…

一个基于jQuery写的弹窗效果(附源码)

最近项目中频繁遇到需要弹出窗口的功能,一直使用浏览器默认的Alert和Confirm弹窗,感觉视觉效果不是那么好,而从网上下载的话又找不到合适的,找到的话有些也是十分臃肿,有时候感觉学习配置的功夫自己也就搞一个了(顺便说一句,我呢,属于比较懒的那种人,如果学习和配置需要花很多时间的话我一般是懒得学习的). 于是就本着“自己动手,丰衣足食”的原则,自己做了一个弹出的效果,以满足自己的“小小”的需求,可以直接通过配置CSS来修改相关样式. 主要是将Javascript中的alert和confirm这…

jQuery网页版五子棋小游戏源码下载

体验效果:http://hovertree.com/texiao/game/4/ 网页五子棋源代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery五子棋游戏 -</title> <script type="…

10款jquery图片广告特效的预览及源码下载改自[帅的相对论]

原文格式有问题,我来排版了一下,分享给大家. 1.jQuery仿海尔官网全屏焦点图特效代码 Query仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效.当焦点图切换时,下方的三块小图也相对应的进行切换. 在线演示源码下载 2.非常炫酷的jQuery动态随机背景滚动特效非常炫酷的jQuery动态随机背景滚动特效,图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 在线演示源码下载 3.jQuery立体感动态下拉导航菜单特效 jQuery立体感动态下拉导航菜单特…

这些web前端特效你造吗?

友情提示:所有特效效果均是GIF图片演示(均有源码下载),所以这个博文可能加载的比较慢,请谅解. 凛冬将至(Winter Is Coming),在上一篇博客凛冬将至,用几款特效暖暖身得到了比较好的响应,所以决定再出一篇分享特效的博客. v1.0写在前面本文中所有给出的特效都是本人将一些需要引入的js或者css文件传到local经过测试以后展示给大家的.如果大家在调试的时候有问题可以随时提出来.因为每个案例代码都太多了,所以所有代码都只给出部分主要代码(便于大家在得到源码之前,可以更好的读懂特效…

9款精致HTML5/jQuery日历时钟控件源码下载（源码请见百度云）链接：http://pan.baidu.com/s/1geIXe75 密码：7m4a

现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这9款日期选择控件,漂亮的UI外观加上人性化的操作设计,大大提高了用户体验,让我们一起来欣赏一下吧. 1.HTML5移动端外观时尚的日期时间选择控件之前我们介绍过很多基于jQuery的日期时间选择控件,比如基于Bootstrap和jQuery的日历控件和日期选择插件.今天我们要分享一款基于HTML5…

分享10 个超酷的 HTML5/CSS3 应用及源码

1.HTML5视频破碎重组特效,强大视觉冲击 HTML5视频播放器很多,但是HTML5视频特效还是很少见的,这款HTML5视频破碎重组特效非常刺激,给人强大的视觉冲击.点击视频任意地方,HTML5将会将这些区域击碎,过一段时间,这些被击碎的视频碎片又将自动重新组合.是一款非常不错的HTML5视频特效. 在线演示源码下载 2.HTML5 3D Google搜索,小盒子大世界 HTML5真是能让人想象万千,居然动起了Google搜索的主意,它利用HTML5技术将Google搜索放到了一个小盒子里,…

10 个超酷的 HTML5/CSS3 应用及源码

1.CSS3密码强度验证表单,码速表样式我们在网站上注册会员时,输入一个强大较大的密码会大大增加帐号安全性,那么什么样的密码才比较安全呢?这款CSS3密码强度验证表单插件可以提示你当前输入密码的安全级别,有意思的是该密码强度验证插件的样式酷似码速表,随着密码强度的加大,码速表指针就会顺时针旋转,当然旋转的特效是利用CSS3结合jQuery实现的. 在线演示源码下载 2.纯CSS3 Android Logo动画绘制,小手还会动利用CSS3可以绘制很多复杂的图案图标,今天就利用纯CSS3实现A…

基于html5制作3D拳击游戏源码下载

今天给大家分享一款基于HTML5实现的3d拳王游戏源码.这款实例适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览源码下载实现的代码. html代码: <div id="chf2" style="position: relative; width: 320px; margin: 0 auto;"> <canvas id="gcvs" w…

10款经典的web前端特效的预览及源码

1.CSS3响应式导航菜单今天我给大家介绍一下如何使用纯CSS来实现的一个响应式导航菜单,我们使用的是HTML5+CSS3技术,当浏览器窗口变小或者使用手机浏览器访问的时候,原本横条菜单会收缩成一个下拉菜单,当鼠标滑向菜单时下拉展示全部菜单.此方法可以应用到有特别多的链接菜单项目中,特别在移动项目中,它可以将所有菜单转换成一个按钮式的下拉菜单. 在线演示源码下载 2.使用raphael.js绘制中国地图最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计…

一款基于jquery和css3的头像恶搞特效

今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="wwiaftm-container"> <div class="base wwiaftm"> <div class="body-1 wwiaftm"> <div …

一款基于jquery超炫的图片切换特效

今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览源码下载来看下实现的代码.注意了,这里有引用jquery和underscore插件. html代码: <div class="wrap"> <div class="box active" style="background-image: url(img/1.jp…

一款基于jQuery的图片场景标注提示弹窗特效

今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗,不支持IE8及以下浏览器.效果非常不错.效果如下: 在线预览源码下载实现的过程. 这款实例要引用jquery和jquery ui库,还有一个实现的main.js库.需上的朋友可以点击上现的下载按钮下载来看看. html代码部分: <div class="container"…

一款基于jquery的鼠标经过图片列表特效

今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览源码下载实现的代码 html代码: <h1>Direction Aware Hover</h1> <div class="container cf"> <div class="boxes"><img class="da-image" sr…

4款基于jquery的列表图标动画切换特效

网页中列表图标随处可见,特别是移动网页上,基本上的导航都采用了列表图标.今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效.喜欢的网友赶紧收藏吧. 在线预览源码下载实现的代码. html代码: <div class="container"> <div class="row"> <div class="col-sm-12"> <h1> The Hamburger Menu&l…

一款基于jquery实现的鼠标单击出现水波特效

今天要为大家绍一款由jquery实现的鼠标单击出现水波特效.用鼠标猛点击页面,你可以看到页面不断出面水波纹效果.然后水波纹渐渐消失.效果非常不错.我们一起看下效果图: 在线预览源码下载实现的代码. html代码: <div id="container"> <h1> Click or Touch the Screen.</h1> <p> Click as fast as you can. <em>Try it on a…

一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览源码下载简要教程这是一款效果非常炫酷的jQuery和CSS3 3D旋转画廊特效插件.第一个DEMO是一个简单的例子,使用CSS3来制作3d旋转效果,然后用js来控制前后导航按钮.第二个DEMO是第一个DEMO的升级版,它增加了图片标题.查看图片.键盘控制等其它功能. HTML结构这个3D画廊…

一款基于jQuery/CSS3实现拼图效果的相册

之前为大家介绍了 HTML5 3D立体图片相册, HTML5图片相册重力感应特效, 基于CSS3图片可倾斜摆放的动画相册今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错.当然图片倾斜需要CSS3支持.效果图如下: 在线预览源码下载实现的代码. html代码: <div id="im_wrapper" class="im…

一款基于jquery的喜欢动画按钮

今天给大家带来一款基于jquery的喜欢动画按钮.这个实例中给了三种动画特效.效果图如下: 在线预览源码下载实现的代码. html代码: <p class='heading'> CSS 'like' buttons </p> <p> Basic 'like' button:</p> <div class='like'> <button class='like-toggle basic'> ♥</button> &l…

动漫网站基于jquery的横向手风琴特效

今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="box2"> <div class="banner_tit"> 动漫人物</div> <div class="hot_role">…

基于jQuery左右滑动切换特效

分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="bodyCon08"> <div class="students"> <div id="four_flash"> <div class="flashBg&qu…