15 个每人都需要的独特jQuery插件
openkk 12年前
<h3>01. <a title="QapTcha" href="/misc/goto?guid=4958343506321096540" target="_blank">QapTcha : jQuery captcha system with jQuery & jQuery UI</a></h3> <figure class="figure aligncenter"> <img style="width:528px;display:inline;height:251px;" class="size-full wp-image-2780" title="QapTcha : jQuery captcha system with jQuery & jQuery UI" alt="15 个每人都需要的独特jQuery插件" src="https://simg.open-open.com/show/0b7b8ad61fd270c7b17b3d7b6ce07ae2.png" /> <figcaption> QapTcha : jQuery captcha system with jQuery & jQuery UI </figcaption> </figure> <p>“QapTcha is a draggable jQuery captcha system with jQuery UI. QapTcha is an easy-to-use, simple and intuitive captcha system. It needs human action instead of to read a hard text and it is a very lightweight jQuery plugin.” This plugin can be used and uploaded to your webhost for your website.</p> <h3>02. <a title="Accessible slider" href="/misc/goto?guid=4958335169979003547" target="_blank">Accessible slider</a></h3> <figure class="figure aligncenter"> <img style="width:523px;display:inline;height:173px;" class="size-full wp-image-2781" title="Accessible slider" alt="15 个每人都需要的独特jQuery插件" src="https://simg.open-open.com/show/5fd8225c9af8a16326e8d7d2b7676258.png" /> <figcaption> Accessible slider </figcaption> </figure> <p>The plugin uses progressive enhancement to replace an already-functional HTML select element with a jQuery UI slider control, and adds a number of features for both visual users and those on assistive technologies. This means you can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there. It also allows the user to interact and make a choice with or without javascript, since the select element can be used if the slider is unavailable.</p> <h3>03. <a title="Fancy Letter Plugin" href="/misc/goto?guid=4958343507871409320" target="_blank">Fancy Letter Plugin</a> | <a title="Fancy Letter Part 2" href="/misc/goto?guid=4958343508672611902" target="_blank">Part 2</a></h3> <figure class="figure aligncenter"> <img style="width:498px;display:inline;height:206px;" class="size-full wp-image-2782" title="Multiple Fancy Drop Caps" alt="15 个每人都需要的独特jQuery插件" src="https://simg.open-open.com/show/c82adbea03c16b69173383a7d99e7ba0.png" /> <figcaption> Multiple Fancy Drop Caps </figcaption> </figure> <p>Learn how to use jQuery to create a drop cap and apply it to every paragraph in a DIV.</p> <h3>04. <a title="jQuery Approach Plugins" href="/misc/goto?guid=4958343509476809407">Approach</a></h3> <figure class="figure aligncenter"> <img style="width:526px;display:inline;height:307px;" class="size-medium wp-image-2783" title="jQuery Approach Plugins" alt="15 个每人都需要的独特jQuery插件" src="https://simg.open-open.com/show/2361a580baf1bc017f2d43d69aabd425.gif" /> <figcaption> jQuery Approach Plugins </figcaption> </figure> <p>jQuery Approach works in a very similar manner to jQuery animate, however it animates over distance instead of time. The closer you get to the object, the more the style will be applied.<br /> For example, you could use approach on an element’s opacity – as you get closer to the element, the opacity would increase and further, decrease for vice versa. Check it out!</p> <h3>05. <a title="Colorful Sliders With jQuery & CSS3" href="/misc/goto?guid=4958186308529642351" target="_blank">Colorful Sliders With jQuery & CSS3</a></h3> <figure class="figure aligncenter"> <img style="width:562px;display:inline;height:308px;" class="size-full wp-image-2784" title="Colorful Sliders With jQuery & CSS3" alt="15 个每人都需要的独特jQuery插件" src="https://simg.open-open.com/show/10ed9031e0204abdb4c51416b5bd1cd3.jpg" /> <figcaption> Colorful Sliders With jQuery & CSS3 </figcaption> </figure> <p>In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.</p> <h3>06. <a title="Textualizer plugins" href="/misc/goto?guid=4958343510996368690">Textualizer – A jQuery plugin to transition through blurbs of text</a></h3> <figure class="figure aligncenter"> <img style="width:560px;display:inline;height:279px;" class="size-full wp-image-2785" title="Textualizer jQueyr plugins" alt="15 个每人都需要的独特jQuery插件" src="https://simg.open-open.com/show/ebeb8b55b7ea54ddfc3e81c34b368cce.png" /> <figcaption> Textualizer jQueyr plugins </figcaption> </figure> <p>Textualizer is a jQuery plugin that allows to transition through blurbs of text. Textualizer currently has the following effects: fadeIn, slideLeft, slideTop, and random. You can choose which effect to use by setting the effect option.</p> <h3>07. <a title="QuickFlip 2" href="/misc/goto?guid=4958343511794925195" target="_blank">QuickFlip 2</a></h3> <figure class="figure aligncenter"> <img style="display:inline;" class="size-full wp-image-2786" title="QuickFlip 2" alt="15 个每人都需要的独特jQuery插件" src="https://simg.open-open.com/show/ece9e600bfabe2dca4d69707e8a7dae7.gif" width="590" height="260" /> <figcaption> QuickFlip 2 </figcaption> </figure> <p>QuickFlip is a jQuery plugin that let’s you flip any piece of HTML markup over like a card. Version 2 is much faster as we can see and it seems that it’s a bit smoother. Triggering and styling is much easier as well as the plugin provides all styling automatically (no need for a separate stylesheet).</p> <h3>08. <a title="jQuery Scroll Path" href="/misc/goto?guid=4958331315848946318" target="_blank">Scroll Path</a></h3> <figure class="figure aligncenter"> <img style="display:inline;" class="size-full wp-image-2787" title="jQuery Scroll Path" alt="15 个每人都需要的独特jQuery插件" src="https://simg.open-open.com/show/d79496c0253beb61abf99b53c6eb71c2.png" width="551" height="230" /> <figcaption> jQuery Scroll Path </figcaption> </figure> <p>Query Scroll Path is a plugin for creating a custom path a browser follows while scrolling.</p> <p>It uses moveTo, LineTo and arc methods to draw the path. It can also rotate the screen in browsers that support CSS transforms.</p> <p>Scrolling can be done with either the mouse wheel or keyboard which uses the arrow keys, space to scroll faster and shift to scroll backwards.</p> <p>Once the path has been created, the plugin can be customised with options to display the scroll bar, run in a loop or draw the path. It is also possible to use a scrollTo method to jump to a specific point in the path.</p> <h3>09. <a title="jParallax" href="/misc/goto?guid=4958343513321271099" target="_blank">jParallax</a></h3> <figure class="figure aligncenter"> <img style="width:535px;display:inline;height:178px;" class="size-medium wp-image-2788" title="jParallax" alt="15 个每人都需要的独特jQuery插件" src="https://simg.open-open.com/show/9364477cd7bc2e6ff57e747c0e16bae5.png" /> <figcaption> jParallax </figcaption> </figure> <p>jParallax is jQuery plugin that creates a parallax effect by turning a list into a viewport. The list elements are displayed as layers that are absolutely positioned and move in response to the mouse with varying dimensions.</p> <p>The easiest way to create a Parallax effect is to use images of different sizes that are larger than the size of the viewport. Larger images move faster and appear closer, while smaller images will appear further away. The dimensions of each image are defined with CSS.</p> <h3>10. <a title="Airport Text Effect" href="/misc/goto?guid=4958343514113927981" target="_blank">Airport Text Effect</a></h3> <figure class="figure aligncenter"> <img style="width:538px;display:inline;height:214px;" class="size-full wp-image-2789" title="Airport Jquery Plugin" alt="15 个每人都需要的独特jQuery插件" src="https://simg.open-open.com/show/8152b7aa44dce54b9fea38d199617dbd.png" /> <figcaption> Airport Jquery Plugin </figcaption> </figure> <p>Airport is a rather simple text effect plugin for Jquery. It emulates the style of those flickering information boards you sometimes find on airports and train stations.</p> <h3>10. <a title="MoaText" href="/misc/goto?guid=4958343514921709443" target="_blank">MoaText</a></h3> <figure class="figure aligncenter"> <img style="width:492px;display:inline;height:40px;" class="size-medium wp-image-2790" title="MoaText" alt="15 个每人都需要的独特jQuery插件" src="https://simg.open-open.com/show/a480a75035d71e23870e40d90fe6e7bb.png" /> <figcaption> MoaText </figcaption> </figure> <p>You can use this jQuery plugin for adding flavor to your web site. By this plugin, text messages on your site are animated on mouse over.</p> <h3>12. <a title="jRumble – jQuery Rumble Effect Plugin" href="/misc/goto?guid=4958343515710455284" target="_blank">jRumble – jQuery Rumble Effect Plugin</a></h3> <p>jRumble is a lightweight jQuery plugin that can be used to create a rumble effect when an element is hovered over or just to bring an element to the user’s attention.</p> <p>It has options to set the range, rotation, speed & opacity of the rumble effect and examples are provided of use with different events. It’s great to use as a hover effect or a way to direct attention to an element.</p> <h3>13. <a title="TimeAgo jQuery Plugin" href="/misc/goto?guid=4958343516513753791" target="_blank">Timeago</a></h3> <figure class="figure aligncenter"> <img style="width:507px;display:inline;height:121px;" class="size-full wp-image-2792" title="Timeago jQuery plugin" alt="15 个每人都需要的独特jQuery插件" src="https://simg.open-open.com/show/589931981835cbaa9eaf5737700130a5.png" /> <figcaption> Timeago jQuery plugin </figcaption> </figure> <p>Timeago is a jQuery plugin to that will convert a time stamp into a pretty date in the format of “2 minutes ago”.</p> <p>It automatically updates without having to reload the page and also supports the HTML5 datetime attribute.</p> <h3>14. <a title="Extremes" href="/misc/goto?guid=4958343517301382793" target="_blank">Extremes jQuery Plugin</a></h3> <figure class="figure aligncenter"> <img style="width:569px;display:inline;height:264px;" class="size-full wp-image-2793" title="Extremes jQuery plugin" alt="15 个每人都需要的独特jQuery插件" src="https://simg.open-open.com/show/a0a94397991e5e5369de25b5fc031f10.png" /> <figcaption> Extremes jQuery plugin </figcaption> </figure> <p>Extremes is a lightweight jQuery plug-in to place list elements around a circle and is licensed under GPLv2/MIT. Special attention is paid to legibility. You will never encounter upside down text.</p> <h3>15. <a title="uCompare" href="/misc/goto?guid=4958343518100620380" target="_blank">uCompare</a></h3> <figure class="figure aligncenter"> <img style="width:533px;display:inline;height:293px;" class="size-medium wp-image-2794" title="uCompare" alt="15 个每人都需要的独特jQuery插件" src="https://simg.open-open.com/show/6277b993cc04e961558d589928736bb0.png" /> <figcaption> uCompare </figcaption> </figure> <p>uCompare is a jQuery plugin that provides a method of comparing two images side by side via a slide control.</p> <p>The plugin also provides options add a caption and set the start position of the panes.</p>