jQuery开发基础教程第11章 jQuery在HTML5中的应用.pptVIP

网站公共部分设计 在本网站的网页中，有两个公共的部分，分别是header元素中的内容和footer元素中的内容这两部分是本站每个网页中都包含的内容，下面具体介绍一下这两个公共部分的主要内容。 1．设计网站header header元素是一个具有引导和导航作用的结构元素，很多企业网站中都有一个非常重要的 header元素，一般位于网页的开头，用来显示企业名称、企业logo图片、整个网站的导航条，以 及flash形式的广告条等。 在本网站中，header元素中的内容包括：网站的logo图片、网站的导航以及通过jQuery技术来循环显示的特色图片，同时还为这些图片添加了说明性关键字。 header元素中的内容在浏览器中的显示结果如图11-19所示。 图11-19 旅游信息网header元素在浏览器中的显示 网站公共部分的header元素的结构示意图如图11-20所示。 图11-20 公共部分header元素的结构示意图 说明：关于CSS样式不是本章讲解的重点，因此省略了CSS样式部分的代码，读者可参见光盘。 Canvas采用HTML颜色表示法，可以使用如下4种方式表示。 （1）颜色关键字 可以使用颜色关键字来表示颜色，例如“red”表示红色、“blue”表示蓝色、“green”表示绿色等。 （2）十六进制字符串 可以使用一个十六进制字符串表示颜色，格式为#RGB。其中，R表示红色集合，G表示绿色集合,B表示蓝色集合。例如：#FFF表示白色，#000表示黑色。 （3）RGB颜色值 也可以使用rgb(r,g,b)格式表示颜色。其中r表示红色集合，g表示绿色集合，b表示蓝色集合。其中r、g、b都是十进制数，取值范围是0-255。常用的RGB如表11-4所示。 颜色 红色值 绿色值 蓝色值 RGB表示 黑色 0 0 0 RGB(0,0,0) 蓝色 0 0 255 RGB(0,0,255) 红色 255 0 0 RGB(255,0,0) 绿色 0 255 0 RGB(0,255,0) 黄色 255 255 0 RGB(255,255,0) 白色 255 255 255 RGB(255,255,255) （4）RGBA颜色值 指定颜色也可以使用rgba()的方法定义透明颜色，格式如下： rgba(r,g,b,a,alpha) 其中r表示红色集合，g表示绿色集合，b表示蓝色集合。r、g、b都是十进制数，取值范围为0-255。Alpha的取值范围为0-1，用来设置透明度，0表示完全透明，1表示不透明。 【例11-2】 使用jcanvas插件绘制一个浅蓝色的正方形（1）创建index.html，引入jquery文件和jCanvas插件文件，代码如下： script type=text/javascript src=../js/jquery-1.11.1.min.js/script script type=text/javascript src=../js/jcanvas.min.js/script （2）在页面中添加canvas元素，具体代码如下： canvas width=300 height=200/canvas （3）编写jQuery代码，使用jCanvas插件的drawRect()方法实现绘制一个浅蓝色的正方形，具体代码如下： $(function(){ $(canvas).drawRect({ fillStyle:lightblue, x:150,y:80, width:100, height:100 }) }) 运行本实例，效果如图11-5所示。 图11-5 绘制一个浅蓝色的正方形 11.2.3 jQuery+HTML5实现图片旋转效果 在HTML4中要实现图片的旋转效果需要编写大量的代码，而在HTML5中，只需要在页面中创建新增的canvas元素，通过导入jQuery库调用该元素加载图片的方法就可以轻松实现图片的旋转效果了。 【例11-3】 实现图片旋转效果 （1）创建index.html，引入jquery文件和jquery.rotate.js文件，代码如下： script type=text/javascript src=../js/jquery-1.11.1.min.js/script script type=text/javascript src=../js/jquery.rotate.js/script （2）在页面中添加待旋转图片的img元素，并添加一个ul元素，通过点击该元