整理的40个有用的jQuery技术和教程_jquery

 

1. Custom Animation Banner with jQuery

 在该教程中你将学会如何使用jQuery的Easing插件及2D Transform插件创建自定义的动画横幅。教程的想法是将不同的元素以自定义动画的形式融入到横幅中去。

 

 查看实例

 

2. Moving Boxes Carousel with jQuery

 你将学会如何创建一个拥有改变面板及缩放面板的按钮的滑块。

 

查看实例 

 

3. Quick Feedback Form – jQuery & PHP

 通过jQuery和PHP实现的快速填写反馈表单的实例。

 

查看实例 

4. Wijmo – jQuery UI Widgets

Wijmo是一个拥有超过30个jQuery UI Widgets的库。

 

 

  查看实例

5. One Page Navigation – jQuery Plugin

 这是一个在同一个页面中如何平滑的导航的实例。

 

查看实例 

6. RSS Reader With jQuery Mobile

 

 

7. Easy Accordion – jQuery Plugin

  The Easy Accordion plugin by Andrea Cima Serniotti will get your definition lists (DTs) and generate a nice and smooth horizontal accordion.

 

 

8. Lettering – jQuery Typography Plugin

 In this article you will learn how to create, for example typographical CSS3 posters, or for really custom type headings, while keeping the text selectable.

 

 

9. Annotation Overlay Effect with jQuery

 Create a simple overlay effect to display annotations.

 

10. Snippet – jQuery Syntax Highlighter

 

Snippet is a cool jQuery syntax highlighting plugin built on top of the SHJS script found on SourceForge. Snippet jQuery plugin provides a quick and easy way of highlighting source code passages in HTML documents.

 

 

 

11. Google Powered Site Search With jQuery

 

In this logical tutorial you will learn how to create a branded custom search engine simply by using Google's AJAX Search API, with which you can search for images and video and news items on your site – and you can also get general web results. 

 

 

 

12. Build a Better Tooltip with jQuery Awesomeness

 In this tutorial ,It  shows how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.

 

13. Simple Tooltip – jQuery & CSS

 

In this tutorial by Soh Tanaka you will learn how to create simple tooltip with jQuery and an incredibly simple styling with CSS. 

 

 

14. Coda Popup Bubbles

jQuery tutorial shows you how to create slick popup bubbles that appear when hovering over the target object.

查看实例

15. Exposure jQuery Plugin

Exposure is an image viewing plugin for the jQuery JavaScript library. It's designed for creating rich, fully customizable viewing experiences, and can handle very large amounts of images without pushing your bandwidth through the roof.

查看实例

16. Giveaway Randomizer App – jQuery

In this tutorial you will learn how to create a dedicated randomizer jQuery application.

查看实例

17. jQuery Smooth Tabs Plugin

jQuery Smooth Tabs is easy to use plugin, which allows you to display your content with some effects, for better user experience. All you need is a single container for your desired tabs and content, some nice CSS and images.

查看实例

18. TN34 Timetabs – jQuery Plugin

This jQuery plugin by Mario Alves creates tab container that switches automatically every cycle to next tab. It is compatible with most modern browsers.

查看实例

19. Full Page Image Gallery with jQuery

In this tutorial you are going to create a stunning full-page gallery with scrollable thumbnails and a scrollable full screen preview.

查看实例

20. bgStretcher – jQuery Plugin

bgStretcher (Background Stretcher) is a jQuery plug-in which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize the image(s) to fill the entire window area. The plug-in will work as a slideshow if multiple images mode is used (the speed and duration for the slideshow is configurable).

查看实例

21. SlideNote – jQuery Plugin For Sliding Notifications

SlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application.

查看实例

22. Easy List Splitter – jQuery Plugin

Easy List Splitter keeps the HTML to the minimum. No unnecessary elements or inline styles are added to the code. You'll get a clean plain HTML with some classes that you can use as hooks to easily style your lists. Choose whether to order your list items vertically or horizontally. You can then decide whether to modify the default CSS or apply a new one.

查看实例

23. Create a Slide Tabbed Box using jQuery

Show you how to create a set a module tab interface that slides content left and right as you click on the tabs.

查看实例

24. Create a Tabbed Interface Using jQuery

This very detailed step-by-step tutorial will show you how to create a tabbed interface using jQuery.

查看实例

25. jQuery Tabbed Interface

Tabbed Interface or Tabbed Structure Menu show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect.

查看实例

26. Create Sliding Image Caption with jQuery

This image gallery tutorial shows you an interesting interaction technique for having captions that slide up to reveal more information about a particular image when the user hovers over it.

查看实例

27. Image Cross Fade Transition

This tutorial will show you how to fade another image in, superimposing onto the current image when the user hovers it. It can be a great way to display more information about a particular image.

查看实例

28. Image Reveal using jQuery

This quick and easy tutorial shows you the concept of hiding and showing elements by watching out for window events .

29. Slider Gallery

在这篇教程中,你将学会如何创建基于jQuery UI的sliding gallery。

查看实例

30. Simple jQuery Image Slide Show with Semi-Transparent Caption

It shows how to create a simple image slide show with a semi-transparent caption with jQuery. It is suitable to display news headlines, or an image slide show in your website front page.

查看实例

31. Create an Amazon Books Widget with jQuery and XML

Create how to leverage jQuery and the Amazon API to display products inside a content area that's horizontally-scrollable in this highly involved step-by-step tutorial.

查看实例

32. Building a jQuery-Powered Tag-Cloud

A tag-cloud is a great way of showing visitors to your blog the main topics of interest that are available. There is also additional information contained in a tag-cloud.

33. Simple jQuery Spy Effect

In this tutorial, you'll discover an innovative technique for mimicking Digg's now defunct Digg Spy application.

查看实例

34. Creating a Floating HTML Menu Using jQuery and CSS

This jQuery-based navigation menu tutorial will show you how to create a menu that follows you up and down the page as you scroll.

查看实例

35. Horizontal Slide Nav Using jQuery & CSS

Learn to create a spectacular sliding navigation whose animation is triggered when the user hovers over a navigation item.

查看实例

36. Creating A Slick Ajaxed Add-To-Basket With jQuery And PHP

This is a detailed tutorial which shows creating an unobtrusive Ajaxed shopping cart using jQuery & PHP and can guide you to Ajaxify any e-commerce software you may already be using or coding.The main functions of the cart will be adding/removing items to the basket without the need of refreshing the page & displaying the actions with effects.

查看实例

37. Create a Digg-style post sharing tool with jQuery

Create a social bookmarking tool that look similar to Digg's. It looks cool, practical and useful! I also include the komodomedia's social bookmarking icons and a long list of submission URL for one click bookmark.

查看实例

38. Create an amazing music player using mouse gestures & hotkeys in jQuery

我们将使用鼠标手势和快捷键结合XHTML、jQuery 技术创建音乐播放器。你可以使用鼠标点击、拖拽操作音乐播放器。

查看实例

39. Creating a Virtual jQuery Keyboard

这个教程会解释我们怎么实现一个简单的虚拟键盘。

查看实例

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

In fluid layouts it is easy to format the text to adjust nicely when the window is resized, but the images are not as fluid-friendly. This Quick Tip shows you how to swap between two image sizes based on the current size of the browser, div, or whatever you decide to make the deciding factor.

查看实例

原文链接:http://www.1stwebdesigner.com/css/useful-jquery-techniques-tutorials/

时间: 2024-09-11 22:15:45

整理的40个有用的jQuery技术和教程_jquery的相关文章

Jquery ajax基础教程_jquery

jQuery的Ajax带来了无需刷新的web页面革命.这里就详细介绍一下jQuery所涉及到的Ajax操作.(无需特殊说明,均需要有服务器配置,这里本人用的是Tomcat 7) 1.基于请求加载文件数据 这里的请求通常都是网页的某些操作,如点击等. 而其加载数据的类型归类为以下四种:a.加载HTML文件:b.加载JSON文件:c.加载Javascript文件:d.加载XML文件. 其对应的四种加载方法分别是:load.getJSON.getScript.get. a.加载HTML文件 把编写好的

打造自己的jQuery插件入门教程_jquery

本文实例讲述了打造自己的jQuery插件的方法.分享给大家供大家参考,具体如下: 写js插件并不麻烦,js插件有两类,类型插件和对象插件.首先举例: $.post(url); 这个是类型插件,换句话说该插件在调用的时候不需要指定对象.那么: $('p').click(); 这个是对象插件,也就是说使用该插件的时候需要指定对象. 在写jQuery插件的时候,都是有固定的模板: jQuery.plugin1 = function(text) { alert(text); };//类型级别框架,类似

JQuery 常用方法基础教程_jquery

$("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值,参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $("img").attr("t

jquery 使用简明教程_jquery

一.选择网页元素jQuery的基本设计和主要用法,就是"选择某个网页元素,然后对其进行某种操作".这是它区别于其他函数库的根本特点.使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素. 选择表达式可以是CSS选择器: 复制代码 代码如下: $(document)//选择整个文档对象$('#myId')//选择ID为myId的网页元素  $('div.myClass')//选择class为myClass的div元素    $

jQuery插件开发详细教程_jquery

扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱. 一.入门 编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性,此处添加的对象属性的名称就是你插件的名称: 复制代码 代码如下: jQuery.fn.myPlugin = function(){   //你自己的插件代码 }; 用户非常喜欢的$符号哪里去了? 它仍然存在,但是,为了避免和其他JavaScript库冲突,我们最好将jQuery

10分钟学会写Jquery插件实例教程_jquery

有很多朋友都用过jquery插件,但是很少有人自己动手写过jQuery插件,本文就以实例形式简单叙述了jQuery插件的实现方法.分享给大家供大家参考之用.具体方法如下:   具体而言,其实就是把一些常用.实用.通用的功能封装起来而以,简单的来讲就是把这些代码放在一个方法里面,可以达到重复使用的效果,这样就可以不需要每次要用此功能的时候都去重新写一遍.   现在Jquery里面加入了插件的概念,只要按照它特定的格式当作平时写function一样去写就可以了,不虽然搞得太复杂的.信不信由你们,反正

jQuery 动画基础教程_jquery

注意此代码需要用到jquery的js文件,才可以用所以大家可以先下载一个jquery文件,注意调用路径.代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1

整理一些很有用的jquery论坛帖子

一些很有用的jquery论坛帖子,还有一些常见问题,相信对使用jquery的朋友都会有帮助. 期待大家讲解下closest [求助]如何使用jquery让页面滚动条滚到最顶端 请教老鸟,以下javascript代码怎样转成jquery? 用jquery如何判断在文本框按下回车键? val()返回undefined,是不是jquery的一个Bug, 好汉贴如何判断当前点击的行是奇数行还是偶数行. 表单提交的问题,不能阻止浏览器默认行为,也不能执行对服务器返回数据的判断. 如何把这二个判断语句合成一

40款非常有用的 jQuery 插件推荐(系列一)_jquery

今天开始将发布系列文章向大家分享40款非常有用的 jQuery 插件. MotionCAPTCHA ( 演示 | 下载 )  MotionCAPTCHA 是一款非常特别的 jQuery 验证码插件,要求用户画出看到的形状才能通过验证,用到了 Canvas 标签,所以只能在现代浏览器中使用.   Smart Validate ( 演示 | 下载 )  这是一款基于 jQuery 的信用卡验证插件,使得繁琐的信用卡格式验证变得轻松,支持各种流行的行用卡类型.   Wave Display Effec