用于创建单页网站的jQuery插件

jopen 9年前
   <p>对于内容少或简化浏览体验,单页网站都是一种不错的选择。下面介绍的这些插件刚好能实现这样的需求:</p>    <h3><a href="/misc/goto?guid=4958331315848946318" target="_blank">jQuery Scroll Path</a></h3>    <p><a href="/misc/goto?guid=4958331315848946318" target="_blank"><img alt="用于创建单页网站的jQuery插件" src="https://simg.open-open.com/show/1bb1aeafaa47a670e3abe5349c66a9e0.jpg" width="480" height="158" /></a></p>    <p>That's a very original plugin which allows us to draw a totally custom scroll path (with curves) of any size.</p>    <p>HTML elements can be placed along the path and events like mousewheel, up/down arrow keys or spacebar will get you to the next element with an animation that follows the path.</p>    <p>An optional custom scrollbar is included which allows click and drag scrolling. Also, the plugin allows rotating the entire page using CSS transforms.</p>    <h3><a href="/misc/goto?guid=4958331325063899529" target="_blank">Curtain.js</a></h3>    <p><a href="/misc/goto?guid=4958331325063899529" target="_blank"><img alt="用于创建单页网站的jQuery插件" src="https://simg.open-open.com/show/0e8642aeb5ac8f3b9decefbc343553e1.jpg" width="480" height="158" /></a></p>    <p><strong>Curtain.js</strong> can display multiple fixed panels with a curtain-rise effect which is great for creating a nice scroll effect.</p>    <p>It is also possible to use the keyboard or mousewheel for scrolling.</p>    <h3><a href="/misc/goto?guid=4958335531080044997" target="_blank">Zoomooz.js</a></h3>    <p><a href="/misc/goto?guid=4958335531080044997" target="_blank"><img alt="用于创建单页网站的jQuery插件" src="https://simg.open-open.com/show/dc279e1b070b11fdba30175fda2dec72.gif" width="480" height="158" /></a></p>    <p><strong>Zoomooz</strong> is actually a zooming plugin, however, it can be easily used to focus on different sections in a single page.</p>    <h3><a href="/misc/goto?guid=4958347865184571040" target="_blank">Pagify.js</a></h3>    <p><a href="/misc/goto?guid=4958347865184571040" target="_blank"><img alt="用于创建单页网站的jQuery插件" src="https://simg.open-open.com/show/33619a9efbc573297cc997b991c23bb4.gif" width="480" height="158" /></a></p>    <p>This jQuery plugin is specifically created for single-page websites.</p>    <p>It works by creating the contents of each menu as separate HTML files and loads those HTML files inside a defined <code></code></p>    <div>     once a menu item is clicked.    <p></p>     <h3><a href="/misc/goto?guid=4958334175763508356" target="_blank">jQuery One Page Navigation Plugin</a></h3>     <p><a href="/misc/goto?guid=4958334175763508356" target="_blank"><img alt="用于创建单页网站的jQuery插件" src="https://simg.open-open.com/show/276b1edee801eccfa5cc1ec9ffe2b142.jpg" width="480" height="158" /></a></p>     <p>A plugin which can scroll to the given links with a nice easing animation.</p>     <p>It has the ability to block the hash change in the address bar and the speed of the animation can be customized.</p>     <p>There are also very good alternatives for this behaviour. Check <a href="/misc/goto?guid=4958347868196112556" target="_blank">jQuery Smooth Scroll</a> and <a href="/misc/goto?guid=4958347869000105152" target="_blank">Smooth Scrolling</a>.</p>     <h3><a href="/misc/goto?guid=4958347869802293388" target="_blank">JustaPage</a></h3>     <p><a href="/misc/goto?guid=4958347869802293388" target="_blank"><img alt="用于创建单页网站的jQuery插件" src="https://simg.open-open.com/show/27fd90a35d697e1a8551c575d185cabf.jpg" width="480" height="158" /></a></p>     <p><strong>JustaPage</strong> is more than a plugin but a template for designing one-page websites.</p>     <p>The template works cross-browser and it is <strong>mobile-friendly</strong>.</p>     <h3>Other Resources</h3>     <p>You may want to check out scrolling and parallax plugins like <a href="/misc/goto?guid=4958347871333829590">Scrollorama</a> (and <a href="/misc/goto?guid=4958347872136303393">SuperScrollorama</a>) to make the browsing experience a little fun.</p>     <p>Also, in order to display more content in single page websites, <strong>lightbox/modalbox and tooltip solutions can help a lot</strong>.</p>     <p><strong>Lightbox/modal plugins:</strong></p>     <ul>      <li><a href="/misc/goto?guid=4958347872940345372">ColorBox: Highly-Customizable jQuery Lightbox</a></li>      <li><a href="/misc/goto?guid=4958347873735384423">Flexible Modal Windows With jQuery Superbox!</a></li>      <li><a href="/misc/goto?guid=4958347874533226571">leanModal – A Micro jQuery Modal Plugin</a></li>      <li><a href="/misc/goto?guid=4958347875336149123">Responsive Lightbox With jQuery UI – rlightbox</a></li>     </ul>     <p><strong>Tooltip plugins:</strong></p>     <ul>      <li><a href="/misc/goto?guid=4958347876129994543">An Advanced jQuery Tooltip Plugin – qTip2</a></li>      <li><a href="/misc/goto?guid=4958347876930364174">Bubble-Shaped Tooltips With jQuery: Grumble.js</a></li>      <li><a href="/misc/goto?guid=4958347877728954513">Tooltipsy – jQuery Tooltips For Control Freaks</a></li>     </ul>    </div>