JQuery&HTML5--Canvas　之　相册

来源：互联网发布：中国人寿收展工资算法编辑：程序博客网时间：2024/05/17 01:18

首先，利用XML记录图片数据。格式如下：（XML文件名为：ZGallery.xml ，这个文件名在html中有对应参数，请更改时注意）

<?xml version="1.0" encoding="utf-8" standalone="yes"?><pictures> <album name = "智圆行方相册"> <pic> <bigimage>images/pic1.jpg</bigimage> </pic> <pic> <bigimage>images/pic2.jpg</bigimage> </pic> </album> 　<album name = “相册名”>　　　<pic>　　　　<bigimage>相对、绝对路径</bigimage>　　　</pic>　 </album>　　……</pictures>

HTML代码：
<!DOCTYPE HTML><html> <head> <meta charset="gb2312"> <title> 智圆行方 ImageGallery 实例 </title>  <mce:script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js" mce_src="http://code.jquery.com/jquery-1.6.1.js"></mce:script>  <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> div.div1 { background-color:rgb(200,200,200); width:1000px; height:30px; box-shadow:0px 0px 6px #000; margin-bottom:5px; } div.div1 td { font:15px "微软雅黑"; color:white; text-shadow:5px 2px 6px #000; } #list { position:absolute; background-color:rgb(10,100,10); padding:10px 10px 10px 10px; box-shadow:0px 0px 6px yellow; } p.item,p.menu { background-color:rgb(10,100,10); width:200px; text-align:center; cursor:pointer; } </style> </head> <body> <mce:script type="text/javascript"></mce:script> <div class="div1">  <table>  <tr>  <td width="250" style="padding-left:5px;" mce_style="padding-left:5px;" valign="top"> 智圆行方 ImageGallery 实例 </td>  <td width="500" id="albumCaption" align="center" valign="top"> 请选择一本相册 </td>  <td> <p id="menu" class="menu" style="margin-top:0px;margin-bottom:0px;" mce_style="margin-top:0px;margin-bottom:0px;"> 相册列表 </p>  <iframe style="position:absolute;" mce_style="position:absolute;" frameBorder="no" src="about:blank" mce_src="about:blank"> 这iframe为的是把下面的div铺垫到最上层，iframe可以盖过Canvas，div又可以盖过iframe。但只有div会被Canvas盖过 </iframe> <div id="list">  </div> </td> </tr> </table> </div> <canvas id="canvas1" width="1000" height="600">  很遗憾！您的浏览器不支持HTML5的Canvas标签！请换用最新款的各种主流浏览器。IE必须为9及以上版本！ </canvas> </body></html>

JQuery&HTML5--Canvas 之 相册

JQuery&HTML5--Canvas　之　相册