web前端设计师们常用的jQuery特效插件汇总

1.jQuery鼠标悬停文字渐隐渐现动画效果

这是一款基于JQuery实现的鼠标悬停文字渐隐渐现动画效果源码,是一款鼠标悬停后图片渐渐有一层透明遮罩层,同时说明文字从左侧滑入,鼠标离开后文字从右侧滑出,整体效果美观自然,用户体验较好。是一款比较优秀的特效源码。该源码兼容目前最新的各类主流浏览器。

在线演示

源码下载

2.jquery基于small2big实现的图片突出显示特效

这是一款基于Jquery的small2big插件实现的图片突出显示特效源码,鼠标滑过图片可实现图片的放大突出显示效果,有三款显示效果供大家选择。

在线演示

源码下载

3.DIV+CSS实现的天猫知名商家店铺导航汇总页面效果

DIV+CSS实现的天猫知名商家导航页面效果源码,是一段汇总了天猫所有知名商家店铺网址和名称的代码,并且为各商家分类显示,还具有有效的搜索功能,及真实的店铺网址。

在线演示

源码下载

4.jquery+css实现的ul+li模仿下拉框表单美化效果

jquery+css实现的ul+li模仿下拉框表单美化效果源码,是一款利用DIV+CSS及jquery实现的下拉框表单美化特效源码。

在线演示

源码下载

5.基于HTML5实现的支持控制播放调整音量的环形音乐播放器

今天我要分享一款外观更酷的HTML5音乐播放器,该播放器是环形的,背景图片非常漂亮,可以控制播放、调整音量等播放器常用的功能。

在线演示

源码下载

6.纯CSS3实现的鼠标悬停图片文字动画效果

纯CSS3实现的鼠标悬停图片文字动画效果源码是使用css3来实现的,加载速度更快,内存占用更低,使用更加简便。

在线演示

源码下载

7.基于jQuery实现的彩色标签图片选项卡切换效果

基于jQuery实现的彩色标签图片选项卡切换效果代码,加载速度更快,内存占用更低,使用更加简便。

在线演示

源码下载

8.jquery实现的点击小图原位置放大图片效果源码

jquery实现的点击小图原位置放大图片效果源码,是一段可以实现点击小图,在原始位置出现大图片的代码,就像是新浪微博一样,点击小图就会在原来的位置把图片放大,缺点就是必须要加上动作,最好就是要么自动在指定id内的图片自动加上放大代码,要么就自动让他能放大。

在线演示

源码下载

9.js实现的鼠标滚动控制图片在原始位置等比例缩放

js实现的鼠标滚动控制图片在原始位置等比例缩放特效源码,是一段可以实现以鼠标为中心滚动鼠标轴等比例放大或缩小图片的代码。

在线演示

源码下载

10.js实现的点击gif封面后加载gif动态图片的js特效

js实现的点击gif封面后加载gif动态图片的js特效源码,是一段实现了点击gif封面后才加载gif格式动态图片内容的代码,此类代码适应于所有网站。

在线演示

源码下载

以上就是小编整理的身为前端设计师们必须要掌握的10个jQuery特效,都是非常常用的效果。

(0)

相关推荐

  • jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页

    ******生成js分页脚****** ****没剑(2008-03-05)**** 修改日期:2008-3-12 添加两个参数:displaynum,displaylastNum可以自由定制显示的页码数量 参数: pagesize:10 //每页显示的页码数 ,count:0 //数据条数 ,css:"mj_pagefoot" //分页脚css样式类 ,current:1 //当前页码 ,displaynum:7 //中间显示页码数 ,displaylastNum:5 //最后显示的

  • jQuery 验证插件 Web前端设计模式(asp.net)

    设计目标:建立一个基于jQuery框架的通用Web验证插件... 设计要求:1.需要漂亮的css样式及小图标的润饰... 2.基于jQuery框架... 3.调用.net Web 服务来实现与数据库的异步交互... 解决方案:1.首先,我们来设计三个类,分别用来显示Web给用户的视觉感知.它们分别是 .msg_warning{font-family:Arial,Helvetica,sans-serif,simsun; background:#e7f7ff url(register/MsgWarn

  • 自己动手制作基于jQuery的Web页面加载进度条插件

    静态效果的实现 网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 大体的写法如下: body{ margin:0; } #progress { position:fixed; height: 2px; background:#2085c5; transition:opacity 500ms linear } #progress.done { opacity:0 } #progress span { positio

  • web的各种前端打印方法之jquery打印插件jqprint实现网页打印

    web的打印方法具我自己懂得知道的有: 1.JQuery插件Jqprint实现 2.JQery打印插件PrintArea实现网页打印 3.CSS控制网页打印样式 JQuery插件Jqprint实现: 首先要导入js文件: jquery.jqprint.js下载 复制代码 代码如下: <script language="javascript" src="jquery-1.7.1.min.js"></script> <script lang

  • 在Web项目中引入Jquery插件报错的完美解决方案(图解)

    在学习Jquery插件的时候,遇到一个问题就是新建web工程后在WebRoot下引入Jquery插件的时候报错,不知道为什么好纠结,但是项目能正常运行,后来找到解决方案,在这里给大家分享一下. 解决方案如下所示: 1.在MyEclipse软件中找打-----windows----preferences,会出现一个如下图所示的界面: 2.在检索框输入一个validation----单击该validation节点,将对于JavaScript脚本的验证取消勾,然后点击Apply,一直yes就行. 3.

  • 20款超赞的jQuery插件 Web开发人员必备

    Creative Radical Web Typography Lettering.js是一个轻量经的.易于使用的jQuery插件,可创造出极具个性的网页排版,是2010年最佳jQuery插件之一. New FancyMoves Jquery Product Slider Jquery Product Slider是一款效果很不错的产品幻灯片插件. Jquery Space Gallery Jquery Space Gallery是一款很有空间感的图片库插件. Fancy Thumbnail H

  • 基于jquery的web页面日期格式化插件

    复制代码 代码如下: (function ($) { var FormatDateTime = function FormatDateTime() { }; $.FormatDateTime = function (obj, IsMi) { var correcttime1 = eval('( new ' + obj.replace(new RegExp("\/", "gm"), "") + ')'); var myDate = correctt

  • web前端设计师们常用的jQuery特效插件汇总

    1.jQuery鼠标悬停文字渐隐渐现动画效果 这是一款基于JQuery实现的鼠标悬停文字渐隐渐现动画效果源码,是一款鼠标悬停后图片渐渐有一层透明遮罩层,同时说明文字从左侧滑入,鼠标离开后文字从右侧滑出,整体效果美观自然,用户体验较好.是一款比较优秀的特效源码.该源码兼容目前最新的各类主流浏览器. 在线演示 源码下载 2.jquery基于small2big实现的图片突出显示特效 这是一款基于Jquery的small2big插件实现的图片突出显示特效源码,鼠标滑过图片可实现图片的放大突出显示效果,有

  • 常用的jquery模板插件——jQuery Boilerplate介绍

    在初次进行jquery插件开发时,我们往往无从下手,当然我们可以按照jquery官方提供的格式进行简单的插件开发,但是很多时候往往不尽完美,一不小心,就造出一个很"烂"的插件:难以维护.难以扩展.使用繁琐.性能不佳...当我们在不断的实践中,慢慢积累下来时,有些问题得到了有效的避免,但也带来了新的问题:在众多纷杂的jquery插件开发模式中,究竟哪一种模式才是最好的呢? 如果能提供一个模板,通过一定的约束和规范为开发者解决在jquery插件开发中的"迷惘"那该多好!

  • WEB前端设计师常用工具集锦

    下面是我整理和收集的一些前端开发常用的 插件.工具.软件等不为别的,相当于给电脑做个小备份,至于使用方法,以后我会总结,目前的话还是自行google吧. [FireFox插件] 1.  Firefbug     --    页面调式工具 2.  YSlow     --    网页评级工具 3.  pixel Perfect      --    HTML与设计稿对比 4.  CSS Usage     --    CSS使用效率优化工具 5.  Page Speed     --    快速优

  • web前端开发JQuery常用实例代码片段(50个)

    本文给大家展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.这些都是我尽量记住的有着最佳性能的代码段,因此如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中!我希望你在这一文章中能找到有帮助的东西. 1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下

  • Web前端新人笔记之jquery入门心得(新手必看)

    本章将为大家介绍以下几点内容: 1.jquery的主要特点: 2.建立jquery的编码环境: 3.简单jquery脚本示例: 4.选择jquery而不是纯javaScript的理由: 5.常用的jquery开发工具:jquery能做什么? ① 取得文档中的元素 $('div.content').find('p'); ② 修改页面的外观 $('ul > li:first').addClass('active'); ③ 改变文档内容 $('#container').append('<a href

  • 基于jQuery实现多标签页切换的效果(web前端开发)

    这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,html和css代码如下: <ul id="tab"> <li id="tab1" onclick="show(1)">10元套餐</li> <li id="tab2" onclick=&quo

  • web 前端常用组件之Layer弹出层组件

    经手几个项目,还是感觉 Layer 用起来比较的轻松,你能想到的 Layer 都能帮你做到. 感谢 Layer 作者贤心,Layer 官网地址:http://layer.layui.com/ 1. Layer 使用特点 Layer 具备全方位的解决方案,致力于服务各水平段的开发人员,让页面轻松地拥有丰富友好的操作体验. Layer 尽可能地在以更少的代码展现更强健的功能,注重性能的提升.易用和实用性.. Layer 兼容了包括IE6在内的所有主流浏览器. 数量可观的接口,可以自定义需要的风格,每

  • 基于jQuery.i18n实现web前端的国际化

    在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国际化英文单词为:Internationalization,又称 i18n,"i"为单词的第一个字母,"18"为"i"和"n"之间单词的个数,而"n"代表这个单词的最后一个字母.在计算机领域,国际化是指设计能够适应各种区域和语言环境的软件的过程. jQuery.i18n.properties 是一款轻量级的 jQuery

  • 15个款优秀的 jQuery 图片特效插件推荐

    这篇文章向大家推荐15个最佳 jQuery 图片效果插件.jQuery是最流行的Javascript框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片效果. 01. Responsive Image Gallery 02. Image Zoom Tour 03. Automatic Image Montage 04. 3D Image Slider 05. Shuffle Text E

  • 薪资那么高的Web前端必看书单

    JavaScript 要学的内容实在很多,如果没有其他编程语言的基础的话,学起来可能要费些力,还是建议先通过在线教程学习一些基本语法和定义. 最重要的是你必须要看书,然后实践. 以下内容都是结合我自己的学习路线与经验,再整理汇总了网络各路大神的资料,希望能帮助源源不断入坑的新人更好的学习. 第1本: <JavaScript权威指南(第6版)> (点击 下载链接) <JavaScript权威指南(第6版)>主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的Jav

随机推荐