2012年4月12最受欢迎的jQuery插件
fmms 12年前
<h2>1. <a href="/misc/goto?guid=4958338675905965034" target="_blank">HoverDir </a></h2> <div align="center"> <a href="/misc/goto?guid=4958338675905965034" 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年4月12最受欢迎的jQuery插件" src="https://simg.open-open.com/show/b103b5ef77f00830793870a327ed129f.jpg" width="560" height="150" /> </a> </div> Create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse. <br /> <br /> <h2>2. <a href="/misc/goto?guid=4958338677558115712" target="_blank">Lake.js </a></h2> <div align="center"> <a href="/misc/goto?guid=4958338677558115712" 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年4月12最受欢迎的jQuery插件" src="https://simg.open-open.com/show/21ebc445b642034284ef29c59f2c5e8c.jpg" width="560" height="150" /> </a> </div> Lake.js takes an image element and inserts a canvas element displaying the image and its flipped reflection directly after the image element. <br /> <br /> <h2>3. <a href="/misc/goto?guid=4958338679093325779" target="_blank">NailThumb </a></h2> <div align="center"> <a href="/misc/goto?guid=4958338679093325779" 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年4月12最受欢迎的jQuery插件" src="https://simg.open-open.com/show/0b1302222205d963fb3b5d3837ef6c6b.jpg" width="560" height="150" /> </a> </div> Create thumbnails easily from high-res images, without any distortion, with one line of code. You can even decide thumbnail dimensions directly from CSS. <br /> <br /> <h2>4. <a href="/misc/goto?guid=4958338680631059974" target="_blank">Scroll Depth </a></h2> <div align="center"> <a href="/misc/goto?guid=4958338680631059974" 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年4月12最受欢迎的jQuery插件" src="https://simg.open-open.com/show/f3eefb7a516cb39671d4bd0b7d9b4e05.jpg" width="560" height="150" /> </a> </div> Keep an eye on how far down the page a user has scrolled and then reports data back to Google Analytics using the GA Events API. The default behavior reports on the 25%, 50%, 75%, and 100% scroll marks. It also sends an initial "Baseline" event to use as a benchmark. <br /> <br /> <h2>5. <a href="/misc/goto?guid=4958338682163815033" target="_blank">Storage.js v1.6.2 </a></h2> <div align="center"> <a href="/misc/goto?guid=4958338682163815033" 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年4月12最受欢迎的jQuery插件" src="https://simg.open-open.com/show/b6209acf61591128b5c5d956941fbe16.jpg" width="560" height="150" /> </a> </div> Simple HTML5 page edits. Storage.js uses the new HTML5 contenteditable attribute and localStorage to bring you HTML5 awesomeness. <br /> <br /> <h2>6. <a href="/misc/goto?guid=4958338683685010947" target="_blank">Pivot.js </a></h2> <div align="center"> <a href="/misc/goto?guid=4958338683685010947" 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年4月12最受欢迎的jQuery插件" src="https://simg.open-open.com/show/55dc7598f4a59c0f6870f2fd05b346d8.jpg" width="560" height="150" /> </a> </div> Pivot.js is a simple way to summarize large data sets on the fly. <br /> <br /> <h2>7. <a href="/misc/goto?guid=4958338685220030622" target="_blank">pow.js </a></h2> <div align="center"> <a href="/misc/goto?guid=4958338685220030622" 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年4月12最受欢迎的jQuery插件" src="https://simg.open-open.com/show/dc219bcb60156f613fa4e29d9801c029.jpg" width="560" height="150" /> </a> </div> Algorithmic sunburst generator via CSS and canvas. <br /> <br /> <h2>8. <a href="/misc/goto?guid=4958338686761485047" target="_blank">Real Shadow </a></h2> <div align="center"> <a href="/misc/goto?guid=4958338686761485047" 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年4月12最受欢迎的jQuery插件" src="https://simg.open-open.com/show/acbd6c93b98a936a4c1e2cc80d902dee.jpg" width="560" height="150" /> </a> </div> A plugin that casts photorealistic shadows. It works in any browser supporting CSS box-shadow property. <br /> <br /> <h2>9. <a href="/misc/goto?guid=4958338688283687508" target="_blank">MiniJs </a></h2> <div align="center"> <a href="/misc/goto?guid=4958338688283687508" 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年4月12最受欢迎的jQuery插件" src="https://simg.open-open.com/show/6d2472516a205faaec830a02cbdda282.jpg" width="560" height="150" /> </a> </div> MiniJs provides a suite of simple and consistent jQuery plugins including image slider, tooltip and notification. <br /> <br /> <h2>10. <a href="/misc/goto?guid=4958338689808088193" target="_blank">TouchTouch </a></h2> <div align="center"> <a href="/misc/goto?guid=4958338689808088193" 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年4月12最受欢迎的jQuery插件" src="https://simg.open-open.com/show/571a70c7d6ace499cad1c976eab15edf.jpg" width="560" height="150" /> </a> </div> Turn a collection of photos on a webpage into a touch-friendly mobile gallery. <br /> <br /> <h2>11. <a href="/misc/goto?guid=4958338691341360852" target="_blank">Presenteer.js </a></h2> <div align="center"> <a href="/misc/goto?guid=4958338691341360852" 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年4月12最受欢迎的jQuery插件" src="https://simg.open-open.com/show/72bf145eb758843f0b9c307639c26cd8.jpg" width="560" height="150" /> </a> </div> A flexible HTML5 presentation tool that uses CSS3 transforms and transitions to make smooth presentations. <br /> <br /> <h2>12. <a href="/misc/goto?guid=4958338692863387892" target="_blank">Pep </a></h2> <div align="center"> <a href="/misc/goto?guid=4958338692863387892" 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年4月12最受欢迎的jQuery插件" src="https://simg.open-open.com/show/af70b13e377b5ceb40719d5a42e222d8.jpg" width="560" height="150" /> </a> </div> Pep was built out of a need for kinetic drag support for both mobile and desktop devices (click & drag). It uses the best of jQuery's animate functions along with CSS3 animations to bring full-blown kinetic drag that works on all HTML5-ready devices.