<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery多层遮罩图像浏览</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="inc/mbMaskedGallery.js"></script>
<script type="text/javascript" src="inc/jquery.metadata.js"></script>
<script type="text/javascript">
$(function(){
$("#g1").mbMaskGallery({
type:"normal",
galleryMask:"mask/monitor.png",
galleryUrl:"",
galleryColor:"black",
galleryLoader:"loader/loader_black.gif",
loaderOpacity:.3,
loader:true,
fadeTime: 500,
slideTimer: 6000,
changeOnClick:true,
navId:"" //nav1
});
$("#g2").mbMaskGallery( {
type:"random",
galleryMask:"mask/oblo.png",
galleryUrl:"",
galleryColor:"white",
galleryLoader:"loader/loader_white.gif",
loaderOpacity:1,
loader:false,
fadeTime: 1000,
slideTimer: 5000
});
$("#g3").mbMaskGallery( {
type:"random",
galleryMask:"mask/photo.png",
galleryUrl:"",
galleryColor:"white",
galleryLoader:"loader/loader_white.gif",
loaderOpacity:1,
loader:false,
fadeTime: 400,
slideTimer: 0,
changeOnClick:true,
navId:"" //nav1
});
});
</script>
</head>
<body>
<table style="width:100%; height:500px" border="0"><tr><td align="center" valign="top">
<div id="g1" class="galleryCont" style="display:inline-block;">
<img src="images/3.jpg" alt="">
<img src="images/2.jpg" class="{url:'mbMaskedGallery1.html'}" alt="" >
<img src="images/5.jpg" class="{script:'alert(\'PIPPO\')'}" alt="">
<img src="images/4.jpg" alt="">
<img src="images/6.jpg" alt="">
<img src="images/7.jpg" alt="">
<img src="images/8.jpg" alt="">
</div>
<!--<div id="nav1"><span class="prev">prev</span> <span class="next">next</span></div>-->
<div id="g2" class="galleryCont" style="display:inline-block;">
<img src="images/3.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/5.jpg" alt="">
<img src="images/4.jpg" alt="">
<img src="images/6.jpg" alt="">
<img src="images/7.jpg" alt="">
<img src="images/8.jpg" alt="">
</div>
<div id="g3" class="galleryCont" style="display:inline-block;">
<img src="images/5.jpg" alt="">
</div>
</td></tr></table>
<!--
fine maskedGallery
-->
<script type="text/javascript">
//TEST chiamata JSON via API Patapage
$(function(){
var params = new Object();
params.siteId = "localhost:8080";
params.obj = "wiki";
var jsonPReq = new Object();
jsonPReq.url = "http://olpc038:8080/API/1.0b/json";
jsonPReq.data = params;
jsonPReq.type = "GET";
jsonPReq.dataType = "jsonp";
jsonPReq.error = function() {
$('#testResult').html("<p>Error!!</p>");
};
jsonPReq.success = function(json){
console.debug(json);
};
$.ajax(jsonPReq);
});
</script>
</body>
</html>
jquery多层遮罩图像浏览在相框中立体切换图像效果.zip （27个子文件） 
132686908322788596 images 
8.jpg 25KB 2.jpg 20KB 6.jpg 37KB 3.jpg 22KB 5.jpg 26KB 4.jpg 27KB header_bgnd.jpg 657B 7.jpg 36KB inc 
mbMaskedGallery.js 10KB jquery.metadata.js 4KB
index.html 3KB loader 
loader1.png 55KB
loader.gif 2KB loader1.gif 3KB loader_white.gif 1KB loader_black_1.gif 1KB loader_red.gif 4KB loader2.gif 958B loader_black_2.gif 2KB loader_black.gif 4KB loader_red_1.gif 1KB mask frame.png 24KB mask.psd 517KB photo.png 39KB monitor.png 39KB oblo.png 48KB cut.png 23KB资源评论
