50+个新的jQuery技巧与教程

相比JavaScript架构更偏好于jQuery的开发人员,简单, 先进和强有力的支持已经成为他们常常讨论的热门话题。事实上,由于jQuery具有明显提高用户与网络应用程序交互能力的强大功能,是最流行的JavaScript框架之一,且它还有另外一个优势,就是允许开发者在处理网页时选择使用类似CSS语法的元素。为了帮助你提高jQuery的运用技巧,下面的这篇文章就为你提供了50个非常有价值的jQuery技巧与教程,若能认真对待,你在下一个的网站建设中将会变得更加得心应手,更有趣味。

类似的教程还有: 35个学习jQuery必备教程

1.Moving Boxes Carousel with jQuery

一个图片展示盒子,分左右两个箭头,控制滑动方向,其最大的特点是:能够利用按钮来改变面板大小并使之淡入淡出。

moving box

2.Sliding Boxes and Captions with jQuery
又一个使用jQuery的图片滑动盒,盒子中的图片和标题遇到鼠标晃过时就会向各个不同的方向或隐或现。

moving box

3.Make a Mega Drop-Down Menu with jQuery
使用jQuery制作万能下拉式菜单。

moving box

4.Creating a Filterable Portfolio with jQuery
利用jQuery创建一个过滤型的不同网页的组合。

jQuery技巧与教程

5.A fancy Apple.com-style search suggestion

依照Apple网站的搜索原理,根据你输入的关键字给出相关的搜索结果。
jQuery技巧与教程

 

6.Current Field Highlighting
高亮显示反馈表单。

jQuery技巧与教程

7.Creating a Dynamic Poll with jQuery and PHP
利用jQuery和PHP制作动态投票区。

jQuery技巧与教程

8.jQuery Infinite Carousel

无限循环式图片展示。

jQuery技巧与教程

9.De-Constructing Accordion and Hover Effects with jQuery

jQuery技巧与教程

10.Better form submission feedback with jQuery
使用jQuery创建更加有效的反馈表单,可以取代浏览器在这方面存在的缺陷。

11.How to Make a Threadless Style T-Shirt Gallery

当缩略图位于比自己小的容器中时,只要将鼠标晃上去,缩略图就会放大到100%的原图,这个教程就是要实现这种效果的。

jQuery技巧与教程

13.Create a gallery by using z-index and jQuery

将CSS属性‘z-index’ 和jQuery的威力结合起来,创建独一无二的展示效果,下图中有两个按钮,表示上一张和下一张,点击之后前面的图片会从顶部往后翻转或后面的图片从底部往前叠加。

jQuery技巧与教程

14.Add a favicon near external links with jQuery
使用jQuery在外部链接的旁边加上一个相关的网站图标(在被链接的网站支持的前提下),这样会给读者带来更加友好的体验。

15.Scrollable Timelines
用jQuery创建滚动式事件记录表。据说可以有效利用CPU。

jQuery技巧与教程

16.Automatically generate table of contents using jQuery
利用jQuery创建一个内容目录表,这对于内容十分长的页面来说十分有用,效果有点像那个锚文本一样。

jQuery技巧与教程

17.Reddit-style Voting With PHP, MySQL And jQuery
如果你是一个reddit网站的常客,对它的投票系统一定不会陌生,人们在那里进行投票,可以赞成,也可以否决。这个教程就是要教会你如何使用jQuery, PHP 和 MySQL创建这样的一个投票系统的。

50个非常有价值的jQuery技巧与教程

18.Making a Content Slider with jQuery UI
利用jQuery UI滑动小工具创建一个引人注目的内容滑块。

50个非常有价值的jQuery技巧与教程

19.BBC Radio 1 Zoom Tabs
利用jQuery制作BBC Radio 1 电台网站的效果:鼠标滑过图像,菜单标签突现,图像稍隐以显示更多图片。

50个非常有价值的jQuery技巧与教程

20.Creating A Slick Ajaxed Add-To-Basket With jQuery And PHP
利用jQuery 和PHP创建外观友好的购物车。

50个非常有价值的jQuery技巧与教程

21.Create a Digg-style post sharing tool with jQuery
制作digg风格的文章分享按钮相当的简单,但是这个教程要教给大家的跟digg的有些不同,在digg每篇文章上的分享按钮都各自有独立的html代码,而这里所教的是所有的分享按钮都共用一个模板。

50个非常有价值的jQuery技巧与教程

22.Using jQuery to play Media Files (MP3,WMA,etc,etc)
使用jQuery播放MP3和WMA格式的媒体文件。

23.Easy Retweet Button
创建retweet按钮。

Easy Retweet Button

24.Create an amazing music player using mouse gestures & hotkeys in jQuery
利用xHTML 和 jQuery创建一个惊人的音乐播放器,此播放器使用鼠标手势和热键即可进行操作。

50个非常有价值的jQuery技巧与教程

25.Creating a Virtual jQuery Keyboard
利用jQuery创建一个虚拟键盘。

利用jQuery创建一个虚拟键盘

26.jQuery Feed Menus

jQuery制作而成的订阅菜单。

50个非常有价值的jQuery技巧与教程

27.Automated image preloading for a snappy UI

图片预加载技术,使用javarscript制作而成,却被包装成一个jQuery插件。

50个非常有价值的jQuery技巧与教程

28.Quick Tip: Resizing Images Based On Browser Window Size

基于浏览器窗口大小可以调整图片到各个不同的尺寸。

50个非常有价值的jQuery技巧与教程

29.Exactly Twitter like Follow and Remove buttons with jQuery and Ajax

制作”follow”和”remove” 渐隐渐显的按钮效果。

50个非常有价值的jQuery技巧与教程

30.Using form labels as text field values

50个非常有价值的jQuery技巧与教程

31.Pretty checkboxes with jQuery

50个非常有价值的jQuery技巧与教程

32.jQuery and Ajax Best Demos Part-2
A small list of jQuery and Ajax demos.

50个非常有价值的jQuery技巧与教程

33.A jQuery inline form validation
jQuery制作的内嵌式验证表单。

50个非常有价值的jQuery技巧与教程

34.How to create a sliding image/reveal content with jquery
教你如何使用jQuery制作滑动图片并显示相关的内容.

50个非常有价值的jQuery技巧与教程

35.The youlove.us scrolling background effect explained
制造一种让背景图片不停地滚动的酷炫效果。

50个非常有价值的jQuery技巧与教程

36.Creating a Keyboard with CSS and jQuery
制作一个由CSS和jQuery组合的虚拟键盘。

50个非常有价值的jQuery技巧与教程

37.Portfolio Layout Idea Using jQuery

50个非常有价值的jQuery技巧与教程

38.Creating the iPhone unlock screen using xHTML, CSS and jQuery
利用xHTML, CSS 和jQuery制作一个iPhone屏幕打开按钮。

50个非常有价值的jQuery技巧与教程

39.jQuery File Tree
利用jQuery制作树形文件夹。

50个非常有价值的jQuery技巧与教程

40.Create an Amazon Books Widget with jQuery and XML

利用jQuery和XML制作的亚马逊式书架。

50个非常有价值的jQuery技巧与教程

41.Creating a table with dynamically highlighted columns like Crazy Egg\’s pricing table
由CSS, JavaScript和jQuery制作的高亮柱块。

50个非常有价值的jQuery技巧与教程

42.Make Your Header Responses To Mouse Movements with jParallax

50个非常有价值的jQuery技巧与教程

43.Submit multiple forms with jQuery and Ajax.
使用jQuery 和 ajax提交多个表单。

50个非常有价值的jQuery技巧与教程

44.Using jQuery To Manipulate and Filter Data
利用jQuery操作和过滤数据。

50个非常有价值的jQuery技巧与教程

45.Building a jQuery Image Scroller
jQuery图片滑块。

50个非常有价值的jQuery技巧与教程

46.vertical scroll menu with jQuery Tutorial
jQuery做成的竖直滚动菜单。

50个非常有价值的jQuery技巧与教程

47.SpriteMenu
有点古怪的菜单。

50个非常有价值的jQuery技巧与教程

48.Slicker Show and Hide

利用jQuery控制一个盒子的隐藏和显示。

50个非常有价值的jQuery技巧与教程

49. web2ajax

类似Facebook那样的搜索引擎。

50个非常有价值的jQuery技巧与教程

50.“Outside the Box” Navigation with jQuery
用jQuery制作的类似linux系统那样的桌面菜单效果。

50个非常有价值的jQuery技巧与教程

52.Animate Image Filling Up Using jQuery

50个非常有价值的jQuery技巧与教程

53.Sexy Drop Down Menu w/ jQuery & CSS
“性感”的下拉式菜单。

50个非常有价值的jQuery技巧与教程

54.Creating a polaroid photo viewer with CSS3 and jQuery

图片一大堆的,看起来很乱,但当你点击任何一张时,它就会跳到正面来了。
50个非常有价值的jQuery技巧与教程

55.Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.

使用jQuery配合Google Analytics跟踪你网站外部链接的点击情况。

56.Super CSS Selector Support with jQuery
整合了jQuery的CSS高级选择器。

原文:smashingmagazine

 

如无特别说明,本站文章皆为原创,若要转载,必须注明以下原文信息:
日志标题: 《50+个新的jQuery技巧与教程》
日志链接: http://www.chenchunlin.info/50-useful-new-jquery-techniques-and-tutorials.html
博客名称: Chenchunlinblog

分类:应用技巧 | 标签: | 本文固定链接. 发表评论 | 引用本文链接.

发表评论

您的邮箱地址不会被公开。 要求填写的项已被标记为*号

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>