<asp:DataList ID="DataList1" runat="server" RepeatColumns= "4" >
<ItemTemplate>
<img src='<%# Eval("Pro_Image") %>' height="140" width="187" onclick="show('<%# Eval("Pro_Id") %>');return false;" alt="" />
</ItemTemplate>
</asp:DataList>
//图片地址是从数据库获取, 单击事件打开一个对应图片ID的隐藏层
function show(id) {/*--打开--*/
clearInterval(prox);
clearInterval(proy);
clearInterval(proxc);
clearInterval(proyc);
var o = document.getElementById(id);
o.style.display = "block";
o.style.width = "1px";
o.style.height = "1px";
prox = setInterval(function () { openx(o, 950) }, 10);
}
function openx(o, x) {/*--打开x--*/
var cx = parseInt(o.style.width);
if (cx < x) {
o.style.width = (cx + Math.ceil((x - cx) / 5)) + "px";
}
else {
clearInterval(prox);
proy = setInterval(function () { openy(o, 425) }, 10);
}
}
function openy(o, y) {/*--打开y--*/
var cy = parseInt(o.style.height);
if (cy < y) {
o.style.height = (cy + Math.ceil((y - cy) / 5)) + "px";
}
else {
clearInterval(proy);
}
}
</script>
//-------------------------上面是一个隐藏层打开的方式
<div id="fd" ondblclick="this.style.display='none'"
style="position:absolute;z-index:1; top: 15px; left: 216px; height: 425px; width: 950px; filter:alpha(opacity=100);opacity:1; display:none">
<div>
<asp:DataList ID="DataList3" runat="server" Width="100%" ShowFooter="False"
ShowHeader="False">
<ItemTemplate>
<div>
<div class="dl_left">
<img src='<%# Eval("Pro_Image") %>' alt="" />
</div> <div class="dl_right" >
<div class="dl_title">
菜品:<%# Eval("Pro_Name") %></div>
<div class="dl_author">
菜系:<%# Eval("Pro_Type")%></div>
<div class="dl_editorcomment">
介绍:<%# Eval("Pro_Detail")%></div>
<div class="dl_unitprice">
价格:<%# Eval("Pro_Price","{0:f2}")%></div>
</div>
</div>
</ItemTemplate>
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
</asp:DataList>
</div>
</div>
//--------------------------这个是隐藏层-------------
我想实现的效果是 页面显示图片 单击后 出来隐藏层 隐藏层里的信息是和图片对应显示 是在同一个页面出来
<ItemTemplate>
<img src='<%# Eval("Pro_Image") %>' height="140" width="187" onclick="show('<%# Eval("Pro_Id") %>');return false;" alt="" />
</ItemTemplate>
</asp:DataList>
//图片地址是从数据库获取, 单击事件打开一个对应图片ID的隐藏层
function show(id) {/*--打开--*/
clearInterval(prox);
clearInterval(proy);
clearInterval(proxc);
clearInterval(proyc);
var o = document.getElementById(id);
o.style.display = "block";
o.style.width = "1px";
o.style.height = "1px";
prox = setInterval(function () { openx(o, 950) }, 10);
}
function openx(o, x) {/*--打开x--*/
var cx = parseInt(o.style.width);
if (cx < x) {
o.style.width = (cx + Math.ceil((x - cx) / 5)) + "px";
}
else {
clearInterval(prox);
proy = setInterval(function () { openy(o, 425) }, 10);
}
}
function openy(o, y) {/*--打开y--*/
var cy = parseInt(o.style.height);
if (cy < y) {
o.style.height = (cy + Math.ceil((y - cy) / 5)) + "px";
}
else {
clearInterval(proy);
}
}
</script>
//-------------------------上面是一个隐藏层打开的方式
<div id="fd" ondblclick="this.style.display='none'"
style="position:absolute;z-index:1; top: 15px; left: 216px; height: 425px; width: 950px; filter:alpha(opacity=100);opacity:1; display:none">
<div>
<asp:DataList ID="DataList3" runat="server" Width="100%" ShowFooter="False"
ShowHeader="False">
<ItemTemplate>
<div>
<div class="dl_left">
<img src='<%# Eval("Pro_Image") %>' alt="" />
</div> <div class="dl_right" >
<div class="dl_title">
菜品:<%# Eval("Pro_Name") %></div>
<div class="dl_author">
菜系:<%# Eval("Pro_Type")%></div>
<div class="dl_editorcomment">
介绍:<%# Eval("Pro_Detail")%></div>
<div class="dl_unitprice">
价格:<%# Eval("Pro_Price","{0:f2}")%></div>
</div>
</div>
</ItemTemplate>
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
</asp:DataList>
</div>
</div>
//--------------------------这个是隐藏层-------------
我想实现的效果是 页面显示图片 单击后 出来隐藏层 隐藏层里的信息是和图片对应显示 是在同一个页面出来
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货