<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataListImg.aspx.cs" Inherits="FileOperate_DataListImg" %><!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 runat="server"><title>DataList点击显示大图效果</title><style type="text/css">#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}#demo img{border:3px solid #eeeeee;width:100px;height:75px;}#enlarge_images{position:absolute;display:none;z-index:2;}</style></head><body> <form id="form1" runat="server"> <div> <asp:DataList ID="DataList1" runat="server" DataSourceID="AccessDataSource1"> <ItemTemplate> <div id="demo"> <img alt="" border="0" src='../images/<%# Eval("img") %>' /></div> <div id="enlarge_images"> </div> </ItemTemplate> </asp:DataList> <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/TempDB.mdb" SelectCommand="select * from datalistimg"></asp:AccessDataSource> </div> <script type="text/javascript"> var demo = document.getElementById("demo"); var gg = demo.getElementsByTagName("img"); var ei = document.getElementById("enlarge_images"); for (i = 0; i < gg.length; i++) { var ts = gg[i]; ts.onclick = function(event) { event = event || window.event; ei.style.display = "block"; ei.innerHTML = '<img src="' + this.src + '" />'; ei.style.top = document.body.scrollTop + event.clientY + 10 + "px"; ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px"; } ts.onmouseout = function() { ei.innerHTML = ""; ei.style.display = "none"; } }</script> </form></body></html>
联系客服