2012 年8月最流行的18个 jQuery 插件
jopen 12年前
<div align="center"> <a href="/misc/goto?guid=4958523617830347342"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/d82fc29a8854fc743efa39818fc3b097.jpg" width="560" height="150" itemprop="image" /></a> </div> <div itemprop="description"> It is time we go through our monthly roundup of fresh jQuery plugins that have gained lots of buzz in the past month, Check out this list to see what you may have missed in August. </div> <a name="more"></a> <br /> <h2>1. <a href="/misc/goto?guid=4958344771938537705" target="_blank">jQuery Picture</a></h2> <div align="center"> <a href="/misc/goto?guid=4958344771938537705" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/e5a12d7d8e379f02d22525ecda3e8f94.jpg" width="560" height="150" /> </a> </div> A tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. <br /> <br /> <h2>2. <a href="/misc/goto?guid=4958523617975104377" target="_blank">BigVideo.js </a></h2> <div align="center"> <a href="/misc/goto?guid=4958523617975104377" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/b7e37e4d6f32142444acb028452f2459.jpg" width="560" height="150" /> </a> </div> BigVideo.js adds fit-to-fill background video to websites. It can play silent background video Or use it as a player to show video playlist. Also, it can show big background images for devices that don’t have autoplay for ambient video. <br /> <br /> <h2>3. <a href="/misc/goto?guid=4958523618073410772" target="_blank">Avgrund Modal</a></h2> <div align="center"> <a href="/misc/goto?guid=4958523618073410772" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/4688901ae0ef0c314cc0eb61d7d4a086.jpg" width="560" height="150" /> </a> </div> Avgrund is a plugin for modal boxes and popups. It does an interesting effect by showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations. <br /> <br /> <h2>4. <a href="/misc/goto?guid=4958523618172452128" target="_blank">Responsive Image Grid</a> </h2> <div align="center"> <a href="/misc/goto?guid=4958523618172452128" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/66b40786dde0e49486a34a8080879a3e.jpg" width="560" height="150" /> </a> </div> A plugin that creates a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions. <br /> <br /> <h2>5. <a href="/misc/goto?guid=4958523618278230545" target="_blank">Adaptor </a></h2> <div align="center"> <a href="/misc/goto?guid=4958523618278230545" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/801ec85adda579082fbbb4f46e6c0ce5.jpg" width="560" height="150" /> </a> </div> Adaptor is a light-weight content slider that aims to provide a simple interface for developers to create cool 2D or 3D slide animation transitions. <br /> <br /> <h2>6. <a href="/misc/goto?guid=4958523618379389912" target="_blank">Infinity.js </a></h2> <div align="center"> <a href="/misc/goto?guid=4958523618379389912" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/dd30182433fadcc264195325f9d6c8b0.jpg" width="560" height="150" /> </a> </div> A UITableView for the web: it speeds up scrolling through long lists and keeps your infinite feeds smooth and stable for your users. It is small, battle-tested, and highly performant. <br /> <br /> <h2>7. <a href="/misc/goto?guid=4958523618476369853" target="_blank">simpleWeather </a></h2> <div align="center"> <a href="/misc/goto?guid=4958523618476369853" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/a41b264e46bf510fc3be8cd65e1259b8.jpg" width="560" height="150" /> </a> </div> A simple plugin to display weather information for some location. The data is pulled from Yahoo Weather feed via the YQL API. <br /> <br /> <h2>8. <a href="/misc/goto?guid=4958523556013813520" target="_blank">PowerTip </a></h2> <div align="center"> <a href="/misc/goto?guid=4958523556013813520" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/8a47773f65729ac9047b886abd18eb7c.jpg" width="560" height="150" /> </a> </div> PowerTip features a very flexible design that is easy to customize, gives you a number of different ways to use the tooltips and supports adding complex data to tooltips. <br /> <br /> <h2>9. <a href="/misc/goto?guid=4958523618622930631" target="_blank">Freetile </a></h2> <div align="center"> <a href="/misc/goto?guid=4958523618622930631" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/72b69b2b8911b37ff8619d06dcb84a6e.jpg" width="560" height="150" /> </a> </div> A plugin to organize page contents in an efficient, dynamic and responsive layout. It can be applied to a container element and to arrange it's children and makes optimal use of screen space, by "packing" them in a tight arrangement. <br /> <br /> <h2>10. <a href="/misc/goto?guid=4958521906741051580" target="_blank">JZoopraxiscope </a></h2> <div align="center"> <a href="/misc/goto?guid=4958521906741051580" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/358543d9d81dc3230f3d1108b947f14c.jpg" width="560" height="150" /> </a> </div> A plugin for creating animations from static images inspired by Eadweard Muybridge's Zoopraxiscope. <br /> <br /> <h2>11. <a href="/misc/goto?guid=4958523618773022661" target="_blank">jQuery Toggles </a></h2> <div align="center"> <a href="/misc/goto?guid=4958523618773022661" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/c3bb7f3648631b2806dde459b4311c77.jpg" width="560" height="150" /> </a> </div> A lightweight jQuery plugin that creates easily-styleable toggle buttons. <br /> <br /> <h2>12. <a href="/misc/goto?guid=4958523618873102922" target="_blank">Smart Time Ago </a></h2> <div align="center"> <a href="/misc/goto?guid=4958523618873102922" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/ca3b1c51ce6592e2bd8b45cc91025774.jpg" width="560" height="150" /> </a> </div> A Simple plugin to update the relative timestamps in your document intelligently. <br /> <br /> <h2>13. <a href="/misc/goto?guid=4958523618973267923" target="_blank">trunk8 </a></h2> <div align="center"> <a href="/misc/goto?guid=4958523618973267923" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/c3c679681aa77238a28187a227b64c79.jpg" width="560" height="150" /> </a> </div> A text truncation extension, when applied to a large block of text, trunk8 will cut off just enough text to prevent it from spilling over. <br /> <br /> <h2>14. <a href="/misc/goto?guid=4958523619070772617" target="_blank">BlocksIt.js </a></h2> <div align="center"> <a href="/misc/goto?guid=4958523619070772617" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/c84b05bd8bc040c1dcddfb02e501241e.jpg" width="560" height="150" /> </a> </div> A plugin for creating dynamic grid layout like Pinterest. It allows join of 2 or more blocks into a big block element. <br /> <br /> <h2>15. <a href="/misc/goto?guid=4958523619171032516" target="_blank">jQuery Zoom </a></h2> <div align="center"> <a href="/misc/goto?guid=4958523619171032516" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/e5a1975e2690984a088197dd7708f84b.jpg" width="560" height="150" /> </a> </div> A plugin to enlarge images on mouseover or mousedown. <br /> <br /> <h2>16. <a href="/misc/goto?guid=4958184851354910166" target="_blank">Really Simple Slideshow</a></h2> <div align="center"> <a href="/misc/goto?guid=4958184851354910166" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/65811dfc44cf19474e7b17a637dc7db2.jpg" width="560" height="150" /> </a> </div> A slideshow plugin that loads images dynamically when required, allowing for larger slideshows without having to pre-load lots of images. <br /> <br /> <h2>17. <a href="/misc/goto?guid=4958523619313385629" target="_blank">Typist </a></h2> <div align="center"> <a href="/misc/goto?guid=4958523619313385629" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/439b89e6551f05ec41846afe97c63663.jpg" width="560" height="150" /> </a> </div> A plugin that allows you to animate text to look like it was typed onto the screen. <br /> <br /> <h2>18. <a href="/misc/goto?guid=4958523619426584292" target="_blank">Tooltipster </a></h2> <div align="center"> <a href="/misc/goto?guid=4958523619426584292" target="_blank"><img style="border-bottom:silver 1px solid;border-left:silver 1px solid;border-top:silver 1px solid;border-right:silver 1px solid;" border="0" alt="2012 年8月最流行的18个 jQuery 插件" src="https://simg.open-open.com/show/7660c174488f1e43913300b2c6165e77.jpg" width="560" height="150" /> </a> </div> A lightweight plugin to easily create clean, HTML5 validated tooltips. It can be easily styled with 100% CSS -no images needed.