2011年 50 个顶级JavaScript, jQuery教程和插件
openkk 12年前
这里面包含了Ajax加载图标生成，专为移动设备而设计的插件，图片展示/放大镜/裁剪，颜色选择器，JavaScript游戏等。这些多总有一款是适合你的。 <br /> <h4><span style="color:#ff0000;"><strong>jQuery Plugins and Tutorials</strong></span></h4> <hr /> <p><strong><a href="/misc/goto?guid=4958187185793538315" target="_blank">Peity Mini Chart</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958187185793538315"><img class="aligncenter" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/c93444e3740b91a95e620d6bb72c4d93.jpg" width="500" height="250" /></a></p> <p>It is a handy jQuery plugin that allows converting an element’s content into a simple < canvas > mini pie, line or bar chart. It has custom chart types.<br /> It works with browsers that support < canvas > only, like Chrome, Firefox, IE9, Opera, Safari.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958187183577000760" target="_blank">Grumble.js</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958187183577000760"><img class="aligncenter" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/a0c876095d3ea49e01d4dfadfe7c1836.jpg" width="500" height="250" /></a></p> <p>This one gives you tooltips without the usual limits of north/east/south/west positioning. You have the ability of rotating the grumble around any given element at all 360 degrees. You can specify any distance and apply any CSS style. It has an auto-magic size adjustment with localised text and FX queues for animating multiple grumbles. It works on IE6+, and all modern browsers.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958187185057997595" target="_blank">DropKick</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958187185057997595"><img class="aligncenter" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/1c72ab8715bea5d1e91ec23565a5dbc1.jpg" width="500" height="250" /></a></p> <p>Creating custom dropdowns is an irksome and time consuming process that can become really hectic too. Conveniences that native dropdowns have like keyboard navigation are also often missing. DropKick can help you here as it makes this task really easy and helps you make it look good too. It also degrade back to SELECT list on unsupported browser. It works on IE7-9, firefox, safari and chrome.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958187182839602214" target="_blank">Credit Card Validator</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958187182839602214"><img class="aligncenter" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/0594d1a7cc968a473d6448ecdfd33d59.jpg" width="500" height="250" /></a></p> <p>As the name suggests, this one is a simple jQuery credit card validation plugin. It makes credit card format validation an easy task. It makes sure that a user entered valid credit card number before making actual transaction. It supports American Express, Master Card, Visa Card, Diners Club and Discover.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958187184331310531" target="_blank">QRCode</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958187184331310531"><img alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/6b3ddc6f95ede0e4e18b7d309cf185f5.jpg" width="500" height="250" /></a></p> <p>This is a great plugin for browser qrcode generation. It lets you add qrcode to your webpages with ease. It is standalone, not more than 4k after minify+gzip, no image download. It is simply based on a library that create qrcode in various language. jquery.qrcode.js wraps it to allow you to include in your own code.</p> <h4 style="text-align:center;"><span style="color:#ff0000;"><strong>Javascript and Animated GIF Loading Animation Solutions</strong></span></h4> <hr /> <p><strong><a href="/misc/goto?guid=4958184965482532422" target="_blank">Canvas Loader</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958184965482532422"><img class="aligncenter size-full wp-image-19877" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/25cc5d01a669d0c3e00090f1269f906d.jpg" width="500" height="250" /></a></p> <p>Canvas Loader is different from other typical animated gif loading image with a canvas based loader of the same width and height. This thing proves to be really helpful when creating mobile apps that may be viewed on Android. It will also check if you have got canvas support before employing the replacement. It has got limited styles, and it only work in browser with Canvas Support.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958322860181369085" target="_blank">HeartCode Canvas Loader</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322860181369085"><img class="aligncenter size-full wp-image-19878" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/e1bc68382c06f54b655f5bee6cf9d427.jpg" width="500" height="250" /></a></p> <p>This one is a small JavaScript UI library, that utilizes HTML5 Canvas element for drawing and animating circular preloaders.It can work in any ‘good’ browser that has support for HTML5 Canvas element. It has a UI to customize preloader.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958322861711865718" target="_blank">Sonic Looping Loader</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322861711865718"><img class="aligncenter size-full wp-image-19879" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/9eb851d32e1f7affcc6f316277b726a4.jpg" width="500" height="250" /></a></p> <p>Sonic is a tiny (~3k minified) JS “class” that can be utilized for creating custom loading animations. You would get amazing results with looping animations, for instance, a snake trying to eat its own tail. It is an amazing javascript preloader, but one downer is that your browser is required to have support for canvas. It is highly configurable and boasts a customizable preloader style.</p> <p>Given <em>below</em> are the <em><span style="color:#ff0000;"><strong>Animated Gif version</strong></span></em>. Animated Gif version differs from the Javascript version by the fact that GIF usually come with a lot of different designs.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958322863244009231" target="_blank">AjaxLoad</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322863244009231"><img class="aligncenter size-full wp-image-19880" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/da69b504c2d804992e8148c9755824da.jpg" width="500" height="100" /></a></p> <hr /> <p><strong><a href="/misc/goto?guid=4958322864771328423" target="_blank">LoadInfo</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322864771328423"><img class="aligncenter size-full wp-image-19881" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/1c021ab4364d69cba79ff52fe6eb8c02.jpg" width="500" height="100" /></a></p> <hr /> <p><strong><a href="/misc/goto?guid=4958322866294702884" target="_blank">Preloaders.net</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322866294702884"><img class="aligncenter size-full wp-image-19882" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/aaf12e467af3df7575228183e802a3e9.jpg" width="500" height="100" /></a></p> <hr /> <p><strong><a href="/misc/goto?guid=4958322867821045139" target="_blank">Chimply</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322867821045139"><img class="aligncenter size-full wp-image-19883" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/f43cad538c51918635c75cb54105be5d.jpg" width="500" height="100" /></a></p> <h4><span style="color:#ff0000;"><strong>Javascript Plugins Optimized for Mobile Devices</strong></span></h4> <hr /> <p><strong><a href="/misc/goto?guid=4958184656266865134" target="_blank">PhotoSwipe</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958184656266865134"><img class="aligncenter size-full wp-image-19884" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/4db4fc0e7bd6db5664e93ae159ece14e.jpg" width="500" height="250" /></a></p> <p>As the name suggests, this one is a photo gallery for mobile and touch devices such as iPhone, iPad, Android, Blackberry 6 and Desktop. It is a self contained JavaScript library which has the ability of being integrated into your mobile websites. It has been greatly optimized for mobile webkit browsers. In case if you want a wider desktop browser support or are utilizing jQuery Mobile, then you would be happy to know that PhotoSwipe comes with a jQuery implementation too.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958188109610829339" target="_blank">Touch Gallery</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958188109610829339"><img class="aligncenter size-full wp-image-19885" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/bcbeabbeb6ac95617a67ac0697aecce7.jpg" width="500" height="250" /></a></p> <p>It provides the experience of native photo-viewing apps to your mobile browser. Touch Gallery is a lightbox gallery with touch support. But it works a bit slow. It boasts fullscreen photo gallery for touch-devices and has been optimized for Mobile Safari on the IPad of iPhone 4. It works with Desktop Safari, Firefox 4, Opera and Chome and has limited support for IE (no transition).</p> <hr /> <p><strong><a href="/misc/goto?guid=4958184538124892418" target="_blank">Audio.js</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958184538124892418"><img class="aligncenter size-full wp-image-19886" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/8091595039f13e944d83e321341c35ae.jpg" width="500" height="250" /></a></p> <p>This one is a drop-in javascript library that lets you use HTML5 tag anywhere. It is native where available and an invisible flash player to emulate for other browsers. It offers a coherent html player UI to all browsers that can be styled used standard css.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958188551708647203" target="_blank">iScroll</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958188551708647203"><img class="aligncenter size-full wp-image-19889" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/59f8b3ed7da2e6c77241d2047720e0ed.jpg" width="500" height="250" /></a></p> <p>This one is the best scrolling plugin for your mobile website. It is now smoother than ever and boasts some really amazing new features, such as, the pinch/zoom, pull down to refresh, snap to elements, improved speed and momentum and customizable scrollbars etc.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958184653445638717" target="_blank">Swipe Gestures</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958184653445638717"><img class="aligncenter size-full wp-image-19890" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/260c5d75bf9eb3ae12990fe65289bf8a.jpg" width="500" height="250" /></a></p> <p>Well this tiny plugin detects swipe gesture. For instance, you have the ability of making a 400x400px div with swipe gesture (left or right) and carry out an event when the right gesture is detected.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958188550969170123" target="_blank">Pull-to-refresh</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958188550969170123"><img class="aligncenter size-full wp-image-19891" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/c3f62b2a4ecd4d1eef5c70b170e3d946.jpg" width="500" height="250" /></a></p> <p>Pull-to-refresh implements pull to refresh in javascript in a unique way. It does not utilize any javascript libraries so it is easily portable to your favorite. It will also let you know how to build and enhance it to perfection.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958188553188950575" target="_blank">VideoJS</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958188553188950575"><img class="aligncenter size-full wp-image-19892" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/d1c52b9351c9a60594e5523959a682b3.jpg" width="500" height="250" /></a></p> <p>It is a small, free and open source HTML5 video player which works with various platforms. It has the ability to degrade back to flash player if it finds an unsupported source. It is really easy to use and understand. It is library independent and has volume control. It also boasts a consistent look between browsers and has full screen and full window modes too.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958188552458911921" target="_blank">MiniApps Shake, Touch and Slider Plugins</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958188552458911921"><img class="aligncenter size-full wp-image-19893" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/28ac2e09f1b8fd4fd653fecb978d8842.jpg" width="500" height="250" /></a></p> <p>They are lightweight plugins that work on mobile web browsers utilizing device acceleromter and touch-cable devices. WKShake is an amazing implemetation that triggers an event when “shake” is detected. It behaves just like the undo feature in iDevices.</p> <h4><span style="color:#ff0000;"><strong>Extreme Makeover: jPaginator CSS3 Edition</strong></span></h4> <p>It helps you ameliorate the user experience of long pagination lists by providing a slider to animate links left and right. This tutorial will teach you ow to skin jPaginator into something really pretty looking.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958184467439028609" target="_blank">Bubble Slideshow jQuery CSS</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958184467439028609"><img class="aligncenter size-full wp-image-19904" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/afe7e68bcbeb94a06bbe23a486160cc1.jpg" width="500" height="250" /></a></p> <p>This is a cool tutorial that will help you make a jQuery bubble animation effect. This is a really amazing effect but keep in mind that it utilizes CSS3 so, it would not work very well with old IEs.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958184478781350428" target="_blank">Uploading Files with AJAX</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958184478781350428"><img class="aligncenter size-full wp-image-19905" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/41cb88c89850bf23dc7cf982b6b0b9a7.jpg" width="500" height="250" /></a></p> <p>This one is quite a simple and to the point tutorial. It teaches you how to ppload File with AJAX. You won’t need to refresh the whole page and your files will be uploaded in the background. You will also be able to see the uploaded photos once they are uploaded.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958186133655278842" target="_blank">Content Rotator with jQuery</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958186133655278842"><img class="aligncenter size-full wp-image-19906" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/f132ddd9b2190650636c8ba6bd7e432a.jpg" width="500" height="250" /></a></p> <p>This one is a unique content rotator tutorial. It is different from others as it has a cool thumbnail gallery built in. Really awesome!</p> <hr /> <p><strong><a href="/misc/goto?guid=4958322885560585722" target="_blank">Using jQuery to Create a Right Click Function to Save Website Logo</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322886364167239"><img class="aligncenter size-full wp-image-19907" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/a2cd9713a1ef7968fcce381b693332c5.jpg" width="500" height="250" /></a></p> <p>This tutorial will teach you how you can add context menu on your website logo. Cool, right?</p> <hr /> <p><strong><a href="/misc/goto?guid=4958318756720504813" target="_blank">jQuery Cycle plugin</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958318756720504813"><img style="width:563px;height:225px;" class="aligncenter size-full wp-image-19908" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/bc0f763917378b265b3b649fc09d2e79.jpg" /></a></p> <p>This fab plugin boasts some really useful features such as pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and various transition effects.</p> <hr /> <p><strong><a href="https://simg.open-open.com/show/fd0ca7106d45513f26e23e227e968954.jpg" target="_blank">Crop, labelOver and pluck</a></strong></p> <hr /> <p><a href="https://simg.open-open.com/show/fd0ca7106d45513f26e23e227e968954.jpg"><img style="width:550px;height:220px;" class="aligncenter size-full wp-image-19909" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/fd0ca7106d45513f26e23e227e968954.jpg" /></a></p> <p>Crop allows your visitors to crop any photo on the go by using JavaScript only. Two other plugins are also available: LabelOver and Pluck.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958322888649339308" target="_blank">Jcrop</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322888649339308"><img style="width:558px;height:223px;" class="aligncenter size-full wp-image-19910" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/f9646cef630b8558383530b284a2d051.jpg" /></a></p> <p>It allows adding picture cropping ability to your web app. It combines ease of a jQuery plugin with a powerful cross-platform DHTML cropping engine!</p> <hr /> <p><strong><a href="/misc/goto?guid=4958322890176207351" target="_blank">AnythingZoomer jQuery Plugin</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322890176207351"><img style="width:559px;height:223px;" class="aligncenter size-full wp-image-19912" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/6955909ebffd531fc85f2c74b64cc3ab.jpg" /></a></p> <p>This plugin can prove to be really useful, especially when you have a small area. Whenever you would mouse over a photo, a pop up comes up showing a zoomed in closer look. Quite amazing..</p> <hr /> <p><strong><a href="/misc/goto?guid=4958322891702832796" target="_blank">JQZoom</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322891702832796"><img style="width:565px;height:226px;" class="aligncenter size-full wp-image-19913" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/1a41d7f86a60dfcd4896a5036928e7c2.jpg" /></a></p> <p>JQZoom is an amazing javascript image magnifier developed at the top of the popular jQuery javascript framework.jQzoom. It is an easy to use script that allows magnifying whatever you want.</p> <hr /> <h4><span style="color:#ff0000;"><strong>Javascript Experiments</strong></span></h4> <hr /> <p><strong><a href="/misc/goto?guid=4958322893227611620" target="_blank">WebGL Easing</a></strong></p> <p><a href="/misc/goto?guid=4958322893227611620"><img class="aligncenter size-full wp-image-19914" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/fe9ad7b5b14f6a2fa3d7304d1e851742.jpg" width="500" height="250" /></a></p> <p>The equations of Robert Penner have been available for quite some years now and are also widely used. So this one is an experiment in which you have the ability of choosing between a couple of meshes and even get out of control if you want.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958322894752715244" target="_blank">Cars Editor WebGL</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322894752715244"><img class="aligncenter size-full wp-image-19915" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/eeba90fdfbf7f48529fc99bb57095cbc.jpg" width="500" height="250" /></a></p> <p>This one is an example of Vehicle Editor using webgl and osgjs</p> <hr /> <p><strong><a href="/misc/goto?guid=4958322896293267731" target="_blank">WebGL Solar System</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322896293267731"><img class="aligncenter size-full wp-image-19916" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/d692a2f8f80989f065c0c58ff5fbc0a7.jpg" width="500" height="250" /></a></p> <p>WebGL Solar System is an experiment that revolves around the N-body problem simulation. Utilizing a simplified version of Barnes-Hut algorithm, you will be able to find out the trajectories of thousands of massive bodies spinning around a larger one.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958322897821616528" target="_blank">Metaball Playground</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322897821616528"><img class="aligncenter size-full wp-image-19917" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/d430dc72f86f63e33456e486a310cead.jpg" width="500" height="250" /></a></p> <p>This is a great demo that utilizes the Marching Cubes algorithm to create metaballs. You also have the ability to customize the material effects and geometry.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958322899344265043" target="_blank">RadioHead WebGL</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322899344265043"><img class="aligncenter size-full wp-image-19919" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/3c6b12d1338e59d5e6944a607fc40f11.jpg" width="500" height="250" /></a></p> <p>Rendering the House of Cards dataset in WebGL. This is a bit eerie because of the human face and because of the fact that it bounces like your heartbeat.</p> <h4><span style="color:#ff0000;"><strong>Javascript Color Picker Plugins</strong></span></h4> <hr /> <p><strong><a href="http://modcoder.org/?ptab=jquery&item=excolor" target="_blank">ExColor</a></strong></p> <hr /> <p><a href="http://modcoder.org/?ptab=jquery&item=excolor"><img class="aligncenter size-full wp-image-19922" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/7f0ca57caabe8a91548fa4db142204ee.jpg" width="500" height="250" /></a></p> <p>This one is a cool jQuery plugin that allows picking colors from a Photoshop-like color picker. It has been attached to input fields and<br /> can be activated easily by calling a single-line function.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958317003434172002" target="_blank">Advanced Javascript ColorPicker</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958317003434172002"><img class="aligncenter size-full wp-image-19923" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/1c85a7513140e1ee498ca51e5593c31a.jpg" width="500" height="250" /></a></p> <p>This one is a sophisticated and highly customizable JavaScript color picker but it does not depend on any Javascript frameworks. It can display the entire color palette (~16.78 mil. colors) in 6 different color modes.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958317002649029619" target="_blank">JScolor</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958317002649029619"><img class="aligncenter size-full wp-image-19924" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/5a0cf0202c378c8f648bc836eb775983.jpg" width="500" height="250" /></a></p> <p>It is one handy and easy-to-implement JavaScript library has the ability of transforming any given input into a color picker. The picker is a hidden layer, it does not use any pop-ups and it can be placed on any side of the input field.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958317006574384937" target="_blank">ColorPicker</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958317006574384937"><img class="aligncenter size-full wp-image-19925" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/0863cd12da433df78d2458228d4e16b4.jpg" width="500" height="250" /></a></p> <p>ColorPicker allows you to pick a color in the same way you pick in Adobe Photoshop</p> <hr /> <p><strong><a href="/misc/goto?guid=4958317004220705516" target="_blank">Farbtastic</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958317004220705516"><img class="aligncenter size-full wp-image-19926" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/97ef4e3f3bf0ee886804252293bdf8bd.jpg" width="500" height="250" /></a></p> <p>This one is a jQuery color picker plugin that can be used to add a color picker into any webpage. The color picker is related to an existing element, for instance a text field, and updates the value of the element when a color is chosen.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958317004995352278" target="_blank">Javascript Color Picker</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958317004995352278"><img class="aligncenter size-full wp-image-19927" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/59e6459403dd4b05dc29703a254b0dff.jpg" width="500" height="250" /></a></p> <p>This one provides you the ability of HSB and RGB options, uses Prototype and works with all major browsers.</p> <p><strong><a href="/misc/goto?guid=4958317008942486441" target="_blank">Really Simple Color Picker</a></strong></p> <p><a href="/misc/goto?guid=4958317008942486441"><img class="aligncenter size-full wp-image-19928" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/a28bafce1725f165726d152be24f8f72.jpg" width="500" height="250" /></a></p> <p>As the name suggests, it is a handy and to the point color picker that has a predefined color palette.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958317005784150225" target="_blank">mooRainbox</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958317005784150225"><img class="aligncenter size-full wp-image-19929" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/28c38bcb317efec6249663fe6b3742a3.jpg" width="500" height="250" /></a></p> <p>It is a really amazing and easy to integrate JavaScript color picker created with mootools. You can link it to any element in the DOM. A click event would be linked to that element. Just a click an element would show or hide mooRainbow.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958317007358867994" target="_blank">jPicker</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958317007358867994"><img class="aligncenter size-full wp-image-19931" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/d8dee7df5cd9b58a93bcebe1b6dc6bdd.jpg" width="500" height="250" /></a></p> <p>jPicker is a quick, tiny and sophisticated jQuery plugin that lets you add an advanced color picker in your web projects. It has been carefully ported from John Dyers’ amazing work on his picker utilizing the Prototype framework.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958317008148151189" target="_blank">SimpleColor</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958317008148151189"><img class="aligncenter size-full wp-image-19932" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/281639206e63c4e0c3196f1883ad5269.jpg" width="500" height="250" /></a></p> <p>This one is a simple jQuery color-picker plugin that shows a square grid of selectable colors.</p> <h4><span style="color:#ff0000;"><strong>JavaScript Games</strong></span></h4> <hr /> <p><strong><a href="/misc/goto?guid=4958322915572203108">Pacmaze</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322915572203108"><img class="aligncenter size-full wp-image-19935" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/c5a47382e23859aaeb67ba12794cf079.jpg" width="500" height="250" /></a></p> <p>As the name hints, Pacman, but from a little different perspective.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958322917107678697" target="_blank">Pong 3D</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322917107678697"><img class="aligncenter size-full wp-image-19936" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/e271e3bda380c77ddf04be26f9987aae.jpg" width="500" height="250" /></a></p> <p>Almost everyone loves playing pong. So how about playing Pong in 3 Dimensions? Sounds awesome, right?</p> <hr /> <p><strong><a href="/misc/goto?guid=4958322918631466105" target="_blank">SandTrap</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322918631466105"><img class="aligncenter size-full wp-image-19938" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/0b6c2482a4e7aad797c1052e052da0e6.jpg" width="500" height="250" /></a></p> <p>SandTrap is a web game. In this game your aim is to get as much sand as you can out of the box and into the pail. A simple but nice game.</p> <hr /> <p><strong><a href="/misc/goto?guid=4958322920156656546" target="_blank">Coil</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958322920156656546"><img class="aligncenter size-full wp-image-19939" alt="2011年 50 个顶级JavaScript, jQuery教程和插件" src="https://simg.open-open.com/show/b6f1773543636b5c8eb2453acfeedab2.jpg" width="500" height="250" /></a><br /> This one is a very addictive game. You have to mouse to lasso glowing points of light before they explode. Quite fun!<br /> <br /> 转自：<a href="/misc/goto?guid=4958322921685593673" target="_blank">http://smashinghub.com/top-50-jquery-plugins-and-tutorials-from-2011.htm</a></p>