JQuery&HTML5--Canvas　之　相册

最新推荐文章于 2023-12-26 01:00:13 发布

原创最新推荐文章于 2023-12-26 01:00:13 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#相册 #jquery #html5 #function #iframe #xml

技术专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种利用XML记录图片数据并结合HTML进行个性化图像画廊展示的方法。通过预加载图像、动态调整画布大小及交互式浏览，实现流畅的图像浏览体验。

首先，利用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>