[Reprint] collect 30 new and amazing jquery plug-ins and tutorials (with DEMO code)

Source: Internet
Author: User

In the field of network development, jquery is becoming ubiquitous because it is easy to learn, easy to use, and easy to expand. The following are 30 + fresh and surprising jquery plug-ins and tutorials compiled from some jquery-related articles. If you are looking for the latest jquery information, it is worth reading.

Jquery 4 has been released. What are we waiting for? Please start using it now. I only read some of the following content. It feels pretty good. So let's share it and learn it together!

1. How to add preloader with loading image in a gallery using jquery
Use jquery pre-loading technology during image gallery loading. Demo | tutorial

2. Simple lava lamp menu tutorial with jquery
Create a unique jquery navigation menu with an animation effect for the lava lamp. Demo | tutorial

3. How to Create a 3D Tag Cloud in jquery
Use jquery to create a 3D tag cloud similar to flash. Demo | tutorial

4. Drag & drop with jquery
The drag-and-drop feature of Web applications provides rich user interfaces to learn how to use jquery to create such user interfaces. Demo | tutorial

5. Awesome horizontal animated Menu Using kwicks for jquery
Use the jquery kwicks plug-in to create a customizable and flexible horizontal animation menu. Demo | tutorial

6. Create a thumbnail gallery with slick heading & caption Effect
Create a thumbnail gallery using the title and Subtitle effects. Demo | tutorial

7. Create an attractive jquery menu with fade in and out effects
Create an attractive jquery menu with a light background when hovering over the mouse. Demo | tutorial

8. jquery PHP Ajax autosuggest
Autosuggest is a useful feature in current web applications. Learn how to create with jquery and PHP. Demo | tutorial

9. Perfect login drop down box like Twitter
Use jquery to simulate Twitter's new drop-down box. Demo | tutorial

10. Crafting an animated postcard with jquery
Only use jquery to create a postcard like flash. Demo | tutorial

11. Twitter like search with jquery & Ajax
Use ajax to create Twitter-like search box Loading results on the same page. Demo | tutorial

12. Voting System with jquery, Ajax, PHP
Learn how to create a vote system similar to dzone. Demo | tutorial

13. ajaxed sliding shopping cart using jquery
Create a shopping basket with Ajax sliding door effects, slide when updating the shopping cart item, and hide it automatically after a period of time. You can also manually hide the options to view the shopping cart at any time. Demo | tutorial

14. How to Build animated header in jquery
Use jquery technology to add an animation background to the webpage title. Demo | tutorial

15. hide and seek with jquery
Use jquery to display multiple modules of event-based applications on a single page. Demo | tutorial

16. jquery comment Preview
You can use jquery to preview real-time comments. Demo | tutorial

17. Styling drop down boxes with jquery
Since it is difficult to use CSS to define styles in the selection box, this tutorial will show you how to use a text box and a list instead of a selection box, and then define styles as needed. Demo | tutorial

18. Scrolling dynamic content box
Load the content to the scroll Div using Ajax. Like Google Reader, When you scroll down, more projects are automatically loaded. Demo | tutorial

19. Ways to debug your jquery or JavaScript code
This article describes how to log on to the jquery console to easily debug JavaScript code. Tutorial

20. 5 ways to make Ajax cballs with jquery
About using jquery technology to Create Ajax requests in different ways. It is even helpful for developers who are already familiar with jquery and use a large number of methods to Create Ajax requests. Demo | tutorial


Technorati label: jquery plug-in, jquery, jquery tutorial

1. tipsy
Presents the Facebook style tooltip plug-in based on the title attribute of the positioning tag. Demo | plug-in Homepage

2. jquery YouTube playlist
Converts a YouTube link list to a playback list, allowing you to view videos on the webpage. Demo | plug-in Homepage

3. superfish menus
The superfish menu is an easy-to-use jquery plug-in that can convert HTML lists to beautiful drop-down menus. Plug-in Homepage

4. elastic
Elastic is a lightweight jquery plug-in that enables textareas to automatically resize content. Demo | plug-in Homepage

5. overscroll
Implement a drag-and-drop scroll effect similar to that of the iPhone on the webpage. Plug-in Homepage

6. tweetable
With tweetable, you can easily and quickly display the Twitter feed source on the webpage. You can choose to convert the Twitter user name and URL address to a hyperlink. Demo | plug-in Homepage

7. jquery link nudge
Use the jquery link nudge plug-in to create a mobile menu bar. Demo | plug-in Homepage

8. timepickr
If you need to input the user system time as a form, you can use this plug-in to provide a wide range of user interfaces for time input. Plug-in Homepage

9. truncatable
Truncatable allows you to hide text blocks on a webpage and display them as needed. Demo | plug-in Homepage

10. incremental search for select boxes
This plug-in converts a normal selection box to a combo box with incremental search. This is useful if there are many options in the selection box. Demo | plug-in Homepage

11. Anything Slider
Anything slider is a fully functional sliding door plug-in that is easy to customize and adapt to your website. Demo | plug-in Homepage

Original English version: 30 + fresh & amazing jquery plugins & tutorials | Web Developer plus
Translation: 30 + fresh and surprising jquery plug-ins and tutorials | mango

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.