<!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" />
<script language="javascript" type="text/javascript" src="jquery-1.5.1.js"></script>
<link rel="stylesheet" type="text/css" href="style/index.css"></link>
<title><{$title}></title>
<style type="text/css">
#flll{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	filter: Alpha(Opacity=70);
	opacity:0.7;
	background-color:#000;
	display:none;
	moz-opacity:0.5; 
}
#im
{
	width:50%;
	left:25%;
	top:200px;
	position:absolute;
	height:400px;
	display:none;
	background-color:#000;
}
</style>
</head>
<body>
<{include file="head.tpl"}>
<div id="flll" id="flll"></div>
<div id="im"><div style="text-align:right; padding:2px;"><a href="#" onclick="return false" id="close" style="color:#FFF; font-size:14px; text-decoration:none">关闭</a></div><div style="text-align:center; margin-top:10px;"><img id="bigimage" src="" width="500" height="350" /></div></div>
<div class="clear"></div>
<div id="content">
<div id="n_left">
<ul>
<{foreach name=class item=bigclass from=$bigclassname}>
<li><a href="product.php?bigclassid=<{$bigclass.0}>"><{$bigclass.1}></a></li>
<{/foreach}>
</ul>
</div><!--#n_left end-->
<div id="n_right">
<h3>产品展示</h3>
<div id="n_product">
<ul>
<{foreach name=product item=p from=$productlist}>

<li>
<div style="text-align:center"><a href="#" onclick="return false"><img class="111" src="<{$p.2}>" width="200px" height="150px" border="0" alt="<{$p.1}>"/></a></div>
<div style="text-align:center; height:25px; width:200px; font-size:14px; line-height:23px; background-color:#F2F2F2"><a href="show.php?class=product&id=<{$p.0}>"><{$p.1}></a></div>
</li>
<{/foreach}>
</ul>
<div class="clear"></div>
<div id="page"><{$page}></div>
</div>
</div><!--#n_right end-->
<div class="clear"></div>
</div><!--#content end-->
<{include file="foot.tpl"}>

<script language="javascript">

//遮罩层
mask = $("#flll");

height=$(document).height();

mask.css({"height":height});

$(".111").click(function(){

src=$(this).attr("src");
$("body").css({"overflow":"hidden"});
scrolltop=$(document).scrollTop();
$("#im").css({"top":scrolltop+200});
mask.show();
$("#im").show(500);
$("#bigimage").attr("src",src);

});

$("#close").click(function(){
	
	mask.hide();
	$("body").css({"overflow":"auto"});
	$("#im").hide(500);

});

//拖曳层

$("#im").mousedown(function(e){

var offset=$("#im").offset();
x1=e.pageX-offset.left;
y1=e.pageY-offset.top;
							
$(document).mousemove(function(e){
	
	x=e.pageX;
	y=e.pageY;
	offset1=$("#im").offset();
	offsettop=offset1.top;
	height=$(document).height();
	
	$("#im").css({"top":y-y1,"left":x-x1,"cursor":"move"});
	
	
});
$("#im").css({"cursor":"move"});
});

$("#im").mouseup(function(){$(document).unbind("mousemove");});


</script>
<script language="javascript" type="text/javascript" src="js/change.js"></script>
</body>
</html>
