6个新的jQuery技术来调剂你的设计内容
jopen 12年前
<h3>1. <a href="/misc/goto?guid=4958199604841653770">JQUERY TRANSIT</a></h3> <p><em>Super-smooth CSS3 transformations and transitions for jQuery</em></p> <p>A very useful jQuery plugin that works the same way as the <code>animate()</code> method, but powered by CSS3 transitions. You get the benefit of smooth CSS3 transformations and transitions on any device. Transformation include: translate, rotate, perspective, scale, skew and so on.</p> <p class="img"><a href="/misc/goto?guid=4958199604841653770"><img title="JQUERY TRANSIT" border="0" alt="JQUERY TRANSIT" src="https://simg.open-open.com/show/ca5bf872944f19d22d2ed928de24d820.jpg" width="500" height="327" /></a></p> <h4>How to Use it?</h4> <p>Just Use <code>$('...').transition</code> instead of jQuery’s <code>$('...').animate</code>.</p> <p>Then choose one of the many transition effects available there: <code>x(px) y(px) translate(x, y) rotate(deg) rotateX(deg) rotateY(deg) rotate3d(x, y, z, deg) scale(x, [y]) perspective(px) skewX(deg) skewY(deg)</code></p> <h3>2. <a href="/misc/goto?guid=4958338907126435365">The Wookmark jQuery plugin</a></h3> <p><em>lays out a series of elements in a dynamic column grid</em></p> <p>The Woomark jQuery Plugin automatically arrange and creates a dynamic box grid layout that responds to your browser size. It is great for showcasing large amounts of content in a minimalistic and stylish way.</p> <p class="img"><a href="/misc/goto?guid=4958338907126435365"><img title="The Wookmark jQuery plugin" border="0" alt="The Wookmark jQuery plugin" src="https://simg.open-open.com/show/9fc3c6a7362eec32969c63964007ad8b.jpg" width="500" height="327" /></a></p> <h4>How to Use it?</h4> <p>It is very simple to setup:</p> <p>1- Include the file in your website (after your include of jQuery)</p> <p><code><script type="text/javascript" src="jquery.wookmark.js"></script></code></p> <p>2- Run it on your content and adjust the options (container, offset, itemWidth)</p> <p><code>$('#myContent li').wookmark({offset: 2});</code></p> <h3>3. <a href="/misc/goto?guid=4958347463178489021">Filtrify </a></h3> <p><em>Beautiful advanced tag filtering with HTML5 and jQuery</em></p> <p>Filtrify is an advanced tag filtering plugin, inspired by <a href="/misc/goto?guid=4958343097608300232" target="_blank">Chosen</a> multiple select feature and Orman Clark’s <a href="/misc/goto?guid=4958347464704192197" target="_blank">Vertical Navigation Menu</a>.</p> <p>Advanced because you can search tags within tags and filter items by multiple tags from different categories and get a live feedback on the number of items containing related tags.</p> <p class="img"><a href="/misc/goto?guid=4958347463178489021"><img title="Filtrify" border="0" alt="Filtrify" src="https://simg.open-open.com/show/8c98261d0ca854d6b1a78f95edf057d3.jpg" width="500" height="327" /></a></p> <h4>How to Use it?</h4> <p>1- Add jQuery, filtrify.js and filtrify.css to the <code><head></code> section of your page.</p> <p><code><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><br /> <script src="js/fitrify.js"></script><br /> <link rel="stylesheet" href="css/filtrify.css"></code></p> <p>2- Now,if you have a list of singers/bands and each one of them have a list of “genre” tags. Your HTML would have to look like this:</p> <p><code><div id="placeHolder"></div></code></p> <code></code> <p><code><ul id="container"><br /> <li data-genre="pop, rock, british, classic rock"> The Beatles </li><br /> <li data-genre="rock, british, blues, classic rock"> The Rolling Stones </li><br /> <li data-genre="alternative, electronic, female vocalists"> Björk </li><br /> <li data-genre="rock, alternative, grunge"> Foo Fighters </li><br /> <li data-genre="rock, classic rock"> Bruce Springsteen </li><br /> ...<br /> </ul></code></p> <h3>4. <a href="/misc/goto?guid=4958327960226136544">Scrollorama </a></h3> <p><em>The jQuery plugin for doing cool scrolly stuff</em></p> <p>Allows you to create transitions out of any numeric CSS property, Scrollorama is one of the quickest ways to develop your own scrolling website, without getting your hands too dirty with JavaScript.</p> <p>By dividing the content into blocks, it simply lets us to animate elements on the page (when a block is reached) based on the browser window’s scroll position.</p> <p class="img"><a href="/misc/goto?guid=4958327960226136544"><img border="0" alt="" src="https://simg.open-open.com/show/0f71a8b14edbf575a1bae186993cc3c6.jpg" /></a></p> <h4>How to Use it?</h4> <p>Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter.</p> <p><code>$(document).ready(function() {<br /> var scrollorama = $.scrollorama({<br /> blocks:'.scrollblock'<br /> });<br /> });</code></p> <p>The animations are accomplished using CSS properties, durations of them can be defined and it is also possible to set the exact scrolling positions of the start/stop events.</p> <h3>5. <a href="/misc/goto?guid=4958347467728984897">Magnifying glass for image zoom</a></h3> <p><em>Create a realistic magnifying glass using Jquery and CSS3</em></p> <p>The code uses CSS3 box-shadow and border-radius properties to create the magnifying glass. Jquery is used to position it at the cursor coordinates and change the background position accordingly.</p> <p class="img"><a href="/misc/goto?guid=4958347467728984897"><img title="Magnifying glass for image zoom" border="0" alt="Magnifying glass for image zoom" src="https://simg.open-open.com/show/c7906989745226f4da23ac38075b0ebb.jpg" width="500" height="297" /></a></p> <p>Moving the cursor away from the image gently fades out the magnifying glass bringing the image back to the default state.</p> <h3>6. <a href="/misc/goto?guid=4958347469266536916">Backbone.Notifier</a></h3> <p><em>Displaying and controlling UI notifications</em></p> <p>Backbone Notifier is a powerful and flexible framework for displaying and controlling dialog notifications built on top of jQuery, Backbone.js and Underscore.js.</p> <p>It currently has large number of options to customise the timing, style, size & position with even more features being added in the future. Includes styles that are fully customizable and don’t require extra CSS and can be extended thanks to smart modules architecture.</p> <p class="img"><a href="/misc/goto?guid=4958347470064208043"><img title="Backbone.Notifier" border="0" alt="Backbone.Notifier" src="https://simg.open-open.com/show/3e061a808c6c8ce9188b87a048d73479.jpg" width="500" height="297" /></a></p> <div class="google-inner"> <ins style="border-bottom:medium none;position:relative;border-left:medium none;padding-bottom:0px;margin:0px;padding-left:0px;width:336px;padding-right:0px;display:inline-table;height:280px;visibility:visible;border-top:medium none;border-right:medium none;padding-top:0px;"> <ins style="border-bottom:medium none;position:relative;border-left:medium none;padding-bottom:0px;margin:0px;padding-left:0px;width:336px;padding-right:0px;display:block;height:280px;visibility:visible;border-top:medium none;border-right:medium none;padding-top:0px;" id="aswift_1_anchor"> <br /> </ins> </ins> </div>