使用HTML5,CSS3和jQuery增强网站用户体验

     <p>记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验？ 是不是立刻就想到了flash实现？这彷佛年代久远的事了。使用现在最流行的web技术 HTML5，CSS3和jQuery，同样也可以实现类似的用户体验。而且使用这些特性将会比使用flash更加有效。也许你可能刚知道Adobe停止开发移动版flash的消息，虽然在桌面中我们还拥有大量的flash的应用，但是随着HTML标准的完善，可能flash也要退出历史舞台了。在今天这篇文章中，我们 将介绍一些非常实用的教程，技巧和资源来帮助大家构建一个更加丰富的用户界面。请大家给积极我们留言！您的支持是我们的最好的动力！</p>    <p><img title="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" border="0" alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="https://simg.open-open.com/show/026431dffb2859a5790a2abec4f2732f.png" width="520" height="400" /> </p>    <h3>表单类</h3>    <p><a title="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" href="/misc/goto?guid=4958199706687989291" target="_blank"><strong>jQuery的美化Checkbox</strong></a></p>    <p>这个教程将帮助你构建一个非常动感的checkbox，用来替换缺省的checkbox，相信大家会喜欢更富有活力的UI界面 </p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/1.jpg" /> </p>    <p><a title="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" href="/misc/goto?guid=4958199707551374028" target="_blank"><strong>Rethinking forms in HTML5 </strong></a></p>    <p>这是来自Nettus+的超棒教程，将教你如何使用HTML5特性来构建表单</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/2.jpg" /> </p>    <p><a title="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" href="/misc/goto?guid=4958199708292598033" target="_blank"><strong>jQuery impromtu</strong></a></p>    <p>一个alert，对话框等组件的替代品，用户将会更喜欢这种UI元素</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/3.jpg" /> </p>    <p><a title="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" href="/misc/goto?guid=4958199709041399969" target="_blank"><strong>jQuery Simple Modal</strong></a></p>    <p>一个非常灵活的对话框框架，提供了非常好的用户界面设计，能够帮助你生成非常酷的表单</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/4.jpg" /> </p>    <p><a title="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" href="/misc/goto?guid=4958199709771620500" target="_blank"><strong>mcDropdown</strong></a></p>    <p>多层选择下拉框，非常适合树状结构的展现</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/5.jpg" /> </p>    <p><a title="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" href="/misc/goto?guid=4958199710526408916" target="_blank"><strong>jQ transform</strong></a></p>    <p>个人非常喜欢使用的表单美化插件，能够帮助你构建漂亮的UI界面。</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/6.jpg" /> </p>    <p><a title="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" href="/misc/goto?guid=4958187137363906979" target="_blank"><strong>Emblematiq niceforms</strong></a></p>    <p>非常不错的一款jQUery框架，允许你使用设计的主题将表单转化成非常酷UI。当然你也可以自己自定义一个主题</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/7.jpg" /> </p>    <p><a title="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" href="/misc/goto?guid=4958199711940246348"><strong>Uniform</strong></a></p>    <p>Uniform将使用自定义的皮肤遮盖缺省的表单，并且可以和你实际的表单元素同步，保证了访问和兼容</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/8.jpg" /> </p>    <p><a title="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" href="/misc/goto?guid=4958187163874812080" target="_blank"><strong>image buttons a part of input fields</strong></a></p>    <p>教你如何生成输入框中的按钮</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/9.jpg" /> </p>    <p><a title="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" href="/misc/goto?guid=4958199713350627860" target="_blank"><strong>DynamicWP contact form</strong></a></p>    <p>非常不错的WP插件，能够生成一个停靠页边的联系人表单，不使用的时候自动隐藏</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/10.jpg" /> </p>    <p><a title="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" href="/misc/goto?guid=4958199714093328732" target="_blank"><strong>jQuery highlight</strong></a></p>    <p>jQuery高亮显示功能，能够让输入高亮，提示用户输入内容</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/11.jpg" /> </p>    <p><a title="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" href="/misc/goto?guid=4958187142531486399" target="_blank"><strong>jQuery inline form validation</strong></a></p>    <p>个人非常喜欢使用的表单输入验证插件，具体使用参考这篇文章：</p>    <a href="/misc/goto?guid=4958199715506997952" target="_blank">使用jQuery插件jquery.validationEngine实现表单验证功能</a>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/12.jpg" /> </p>    <h3>导航类<br /> </h3>    <p><a href="/misc/goto?guid=4958199716246619551" target="_blank"><strong>White smoke menu style</strong></a></p>    <p>这个jQuery开发的导航菜单让人想起了flash开发的菜单效果，整个移动如此的顺畅，让你感觉它就是flash开发的。 兼容所有的浏览器，即使javascript被关闭也可以正常工作。</p>    <p><a title="gbin1.com" href="/misc/goto?guid=4958199716979561759" target="_blank"><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/13.jpg" /></a> </p>    <p> <a title="gbin1.com" href="/misc/goto?guid=4958199716979561759" target="_blank"><strong>jQuery mb.Menu</strong></a></p>    <p>如果你想开发一个多层的属性菜单，那么这个插件就是你要找的解决方法之一。</p>    <p><br /> <a title="gbin1.com" href="/misc/goto?guid=4958199718397594181"><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/14.jpg" /></a> </p>    <p><a title="gbin1.com" href="/misc/goto?guid=4958199718397594181"><strong>Coda Slider</strong></a></p>    <p>一个非常不错的滑动面板，非常适合滑动类型面板的应用。 并且可以使用高级特性增强功能</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/15.jpg" /></p>    <p> <a title="gbin1.com" href="/misc/goto?guid=4958199718397594181" target="_blank"><strong>ID Tabs</strong></a></p>    <p>如果考虑扩展性，这个插件恐怕是你能找到的最好的面板导航标签页插件了。</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/16.jpg" /><br /> <br /> <a title="GBin1.com" href="/misc/goto?guid=4958199720493055359" target="_blank"><strong>Smooth horizontal sliding menu</strong></a><br /> <br /> 这个教程教你如何使用jQuery来创建一个垂直滑动显示的子菜单</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/17.jpg" /> </p>    <p><a title="gbin1.com" href="/misc/goto?guid=4958199721230242855" target="_blank"><strong>jBreadCrumb Menu</strong></a></p>    <p>这个可以缩放的当前位置可以自动根据当前位置长度来缩放，非常不错的创意</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/18.jpg" /></p>    <p><a title="gbin1.com" href="/misc/goto?guid=4958199721977153628" target="_blank"><strong>jQuery FLOWERNAV</strong></a> </p>    <p>非常动感的一个导航实现， 能够给你的链接添加一个花朵的效果</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/19.jpg" /></p>    <p><a title="gbin1.com" href="/misc/goto?guid=4958199722712079923" target="_blank"><strong>jQuery Accordion</strong></a><br /> <br /> 一个使用非常简单的手风琴显示效果</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/20.jpg" /> </p>    <h3>用户界面类<br /> </h3>    <p><a title="gbin1.com" href="/misc/goto?guid=4958199723449648958" target="_blank"><strong>jQuery Slide Note</strong></a><br /> <br /> Slide node是一个可以帮助你提供一些有效提示或者信息从而方便你访问用户使用网站的插件。</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/21.jpg" /><br /> <br /> <a title="gbin1.com" href="/misc/goto?guid=4958199724190932026" target="_blank"><strong>jQuery page peel</strong></a><br /> <br /> 一个非常酷的显示广告的插件。</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/22.jpg" /><br /> <br /> <a title="gbin1.com" href="/misc/goto?guid=4958199724927734020" target="_blank"><strong>jQuery infiniScroll</strong></a><br /> <br /> jQuery的无限滚动效果插件，用来帮助你现实大幅的内容</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/23.jpg" width="400" height="120" /><br /> <br /> <a title="gbin1.com" href="/misc/goto?guid=4958199725671337756" target="_blank"><strong>jQuery SliderNav</strong></a><br /> <br /> 一个动态垂直滑动显示导航菜单的插件</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/24.jpg" /> </p>    <p><a title="gbin1.com" href="/misc/goto?guid=4958188722548849644" target="_blank"><strong>jQuery tipped</strong></a><br /> <br /> 一个非常酷的插件允许你添加提示到你的网站。当然提供了可选的皮肤。<br /> <br /> <a title="gbin1.com" href="/misc/goto?guid=4958184289312726437" target="_blank"><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/25.jpg" /></a></p>    <p><a title="gbin1.com" href="/misc/goto?guid=4958184289312726437" target="_blank"><strong>Supersized</strong></a><br /> <br /> 一个能够让你的网站背景幻灯显示的插件</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/26.jpg" width="400" height="145" /><br /> <br /> <a title="gbin1.com" href="/misc/goto?guid=4958199728459046775" target="_blank"><strong>Imagin8</strong></a></p>    <p>不是一个简单的图片幻灯插件，它能够让你指定一个目录，这个目录下的所有图片都能够显示，不需要你在HTML代码中指定，非常实用！</p>    <p><a title="gbin1.com" href="/misc/goto?guid=4958199729199100912" target="_blank"><strong>jQuery Lettering</strong></a><br /> <br /> 一个可以帮助你控制每个单独字母的插件。 帮助你有效的创建一些独特的文字效果<br /> <br /> <a title="gbin1.com" href="/misc/goto?guid=4958199729934289469" target="_blank"><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/28.jpg" /></a></p>    <p><strong><a title="gbin1.com" href="/misc/goto?guid=4958199729934289469" target="_blank">jQuery stylesheet Switcher</a><br /> </strong><br /> 这个插件允许你添加链接来修改页面的样式表</p>    <p><img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/29.jpg" /><br /> <br /> <a title="gbin1.com" href="/misc/goto?guid=4958199731371935717" target="_blank"><strong>Flip</strong></a><br /> <br /> Flip是一个帮助你实现翻动元素效果的jQuery插件<br /> <br /> <img alt="使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣" src="http://www.gbin1.com/technology/jquery/20111116improveusabilitybyhtml5css3jquery/30.jpg" /></p>    <p>原文来自：<a href="/misc/goto?guid=4958199732319342328" target="_blank">使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣</a> </p>