分享8个超棒的基于HTML5和jQuery的开发教程

     <p>HTML5 和jQuery组合目前对于web开发人员来说是强大的工具之一，使用这个组合能够帮助你扩展你设计的局限，实现一些非常绚丽及其强大的web应用或者网 站。尤其是最近jQuery 1.0的发布，更助力了移动设备的开发。现在已经有很多的开发人员和设计人员开始使用HTML5和jQuery配合开发来显示各种特效。今天我们将给大家 推荐8个精心选择的HTML5和jQuery组合开发的教程，希望对大家有帮助，如果你喜欢这些教程，请给我们留言，谢谢！</p>    <h3>精选之英文教程</h3>    <h3><a title="www.gbin1.com" href="/misc/goto?guid=4958198986248266500" target="_blank">1.  HTML5和jQuery的灰度图片悬浮效果</a></h3>    <p>在这个教程中，作者使用HTML5的canvas将针对网站图片做不同的灰度处理。这个演示中使用HTML5和jQuery的黄金组合来动态的克隆颜色来实现灰度效果。整个显示非常炫。是学习HTML5 canvas的不错实战教程。</p>    <p><img alt="分享8个超棒的基于HTML5和jQuery的开发教程" src="https://simg.open-open.com/show/49e0cde8edff67101deeac959554a333.jpg" width="520" height="403" /></p>    <h3><a title="www.gbin1.com" href="/misc/goto?guid=4958184458914217857" target="_blank">2.  使用HTML5 audio及其jQuery实现的全屏的幻灯演示</a></h3>    <p>使用HTML5 audio来实现音效，使得jQuery的幻灯演示更加逼真并且富有创意。</p>    <p><img alt="分享8个超棒的基于HTML5和jQuery的开发教程" src="https://simg.open-open.com/show/545f4b56fe3d25cc273a2a1293f08ddf.jpg" width="520" height="347" /></p>    <h3><a title="www.gbin1.com" href="/misc/goto?guid=4958319491171826145" target="_blank">3.  使用jQuery和HTML5实现的照相机快门效果</a></h3>    <p>在这个教程中，我们将学习使用HTML5 canvas元素来创建一个图片作品集，并且使用快门效果来展示作品。这个将功能被开发成了一个jQuery插件，你可以很方便的在你的web应用中使用。</p>    <p><img alt="分享8个超棒的基于HTML5和jQuery的开发教程" src="https://simg.open-open.com/show/1f1b7d4cf729f873c8d3c374f40ec9c3.jpg" width="520" height="260" /></p>    <h3><a title="www.gbin1.com" href="/misc/goto?guid=4958319793861042531" target="_blank">4.  一个jQuery和HTML5实现的导航菜单</a></h3>    <p>这是一个超级简单的使用HTML5和jQuery实现的导航菜单，使用简单的CSS3属性来美化菜单UI。</p>    <p><img alt="分享8个超棒的基于HTML5和jQuery的开发教程" src="https://simg.open-open.com/show/344c29c16e69d5bc1651fe4c37771ecb.jpg" width="520" height="207" /></p>    <h3><a title="www.gbin1.com" href="/misc/goto?guid=4958199037508447965" target="_blank">5.  使用HTML5,CSS3和jQuery实现的弹出条</a></h3>    <p>这个教程将介绍使用CSS3, HTML5和jQuery来实现一个弹出条。这个弹出条将悬浮于页面内容之上。可以用来帮助提示读者最新的消息，博客，微博等等。</p>    <p><img alt="分享8个超棒的基于HTML5和jQuery的开发教程" src="https://simg.open-open.com/show/916cc25b567773b195dd5d6050e38164.jpg" width="520" height="200" /></p>    <h3>精选之中文教程</h3>    <h3><a title="www.gbin1.com" href="/misc/goto?guid=4958319795357783139" target="_blank">1. 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果</a></h3>    <p>这个教程中，我们使用HTML5的data定义及其<a title="www.gbin1.com" href="/misc/goto?guid=4958319796144618550" target="_blank">Quicksand插件</a>实现了一个星际争霸2全兵种展示功能。希望对大家处理图片展示有帮助。</p>    <p><img alt="分享8个超棒的基于HTML5和jQuery的开发教程" src="https://simg.open-open.com/show/676677bba011e4e690023b2d1c118459.jpg" width="520" height="400" /></p>    <h3 class="title"><a title="www.gbin1.com" href="/misc/goto?guid=4958319796918083697" target="_blank">2. 使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果</a></h3>    <p>这个教程中，使用HTML5和360度展示插件<a title="www.gbin1.com" href="/misc/goto?guid=4958197568721590019" target="_blank">Reel 1.1.3 </a>实现了一个兵种全角度欣赏的特效。</p>    <p><img alt="分享8个超棒的基于HTML5和jQuery的开发教程" src="https://simg.open-open.com/show/10ca57f6161cdae25c5fc977fe983c20.jpg" width="520" height="328" /></p>    <h3><a title="www.gbin1.com" href="/misc/goto?guid=4958319798420585586" target="_blank">3. 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用</a></h3>    <p>一个使用HTML5的拖放API是实现的文件上传功能。允许用户使用拖拽方式来上传电脑上的图片，使用现代浏览器支持的新HTML5 API。</p>    <p><img alt="分享8个超棒的基于HTML5和jQuery的开发教程" src="https://simg.open-open.com/show/014a39325591adfd4355c05ff7f2ac5d.jpg" width="520" height="285" /></p>    <p>来源：<a title="分享8个超棒的基于HTML5和jQuery的教程 gbin1.com" href="/misc/goto?guid=4958199732319342328" target="_blank">分享8个超棒的基于HTML5和jQuery的开发教程</a></p>