10 Web front-end effects and source downloads based on jquery

1.jQuery time Axis Plug-in: JQuery Timelinr

This is a time-axis plug-in that can be used to showcase history and planning, especially for sites that showcase the development process, events, and more. The plugin is based on jquery and can slide toggle, scroll horizontally and vertically, and support keyboard orientation keys. The mouse wheel event can be supported after expansion.

Online Demo One

Online Demo II

Online Demo Three

SOURCE download

2. Submit a form using Ctrl+enter

When we post a tweet or forum, you can click the Submit button to post content when you have finished typing in the Content entry box. However, if you are lazy, you can not move the mouse, just press and hold the Ctrl+enter key on the keyboard, you can submit the form, complete the content publishing. Of course, since the input box is a multi-line text input box textarea, we know that pressing the ENTER key in textarea can wrap, and cannot submit the form directly (submit), and by default, the browser ignores the CTRL key. Then we can use the JavaScript script to control the combination of using the Ctrl+enter key to complete the form submission, this article together with the example to explain the ctrl+enter based on jquery submission Form effect.

Online Demo

SOURCE download

3. Ultra-fast Menu switching effect

This is a very smooth menu display effect, applied on Amazon (amazon.cn), when you move the mouse up and down, the level two menu will be very light switch, without any delay, to the user like a silky feel. This effect with the help of a jquery plug-in Menu-aim, this article will be combined with an example to explain how to achieve super-fast menu effect.

Online Demo

SOURCE download

4.jQuery Multi-stage accordion Menu

Accordion menu is generally used for pull-down navigation, because the appearance is very concise, with the accordion can be used as stretching and contraction of the name, the appropriate application of the accordion effect will give users a very good experience. This article makes it easy to create a very nice menu of accordion effects with the jquery plugin.

Online Demo

SOURCE download

5. Date Time Picker: DateTimePicker

We learned about the date selector provided by the jquery UI: The use of DatePicker, then we will also encounter the choice of date in the application, but also to select the time situation, most developers may use the drop-down box to implement the selection of seconds and minutes, and fortunately there is a date time picker: DateTimePicker, it can combine DatePicker to select a date and choose a time.

Online Demo

SOURCE download

6. Date picker: Use of jquery DatePicker

In the jquery UI, a very useful date selector is available: DatePicker, which makes it easy to display dates in a calendar and flexibly configure options, including date formats, ranges, and more. We often use DatePicker in Web applications, such as requiring users to enter dates for related queries. We've been applying datepicker to many projects before, and we've written it today to share with you.

Online Demo

SOURCE download

7.flowplayer-a free web video player

FlowPlayer is an open source (GPL 3) Web video player. You can embed the player in your Web page, and if you are a developer, you can also freely customize and configure player-related parameters to achieve your desired playback. This article mainly introduces the use of FlowPlayer. FlowPlayer supports the playback of FLV, SWF and other streaming media as well as picture files, which can play video files very smoothly and support custom configuration and extension.

Online Demo

SOURCE download

8. Adaptive Grid Layout-Drywall effect

When we use Sina Weibo, we can see a lot of Weibo information on our Weibo featured pages. This page information is mainly based on the picture with text description, the page uses the adaptive grid layout is the drywall effect, picture loading technology, as well as the rolling loading content technology. This article first introduces the drywall effect. In fact, we do the layout of the page is equivalent to the wall of the teacher in the completion of the construction. When we design the page, if there are a lot of the same div, loading different content, these div all use float:left, if not limit the height of these div, page layout may appear the phenomenon of walls overhead. Click here to see the effect, and after the layout optimization of the page layout effect is very different, please see the demo. This article uses a page layout plugin masonry written by David Desandro, which is based on the jquery library and provides many parameters and methods to tailor different effects to different needs.

Online Demo

SOURCE download

9. Build a Web application for product introductions

To give users a better understanding of your product features, you may want to use a guide to product introductions to guide users through product features and processes when releasing new products or upgrading product features. This article will introduce you to a great Web application for product introductions. Just like a web product upgrade such as a Twitter or a mailbox, with an app built with Guiders.js, users will see a few columns of pop-up layers that can be positioned anywhere on the page, guide the user through a step-by-step, and finally exit the wizard. Guiders.js is a jquery-based Web application plug-in, the author of Jeff-optimizely. Let's show you how to apply it in a real project.

SOURCE download

10.jquery+css to achieve vertical scrolling effect

When you want to display a lot of content in a limited area of the page, we usually use tab switching, scrolling, and so on to achieve the display effect. In this example, we use jquery and CSS to make the content of the page scroll vertically, and to support the mouse wheel drive.

Online Demo

SOURCE download

This article fixed link: http://www.i7758.com/archives/1577.html

10 Web front-end effects and source downloads based on jquery