datalist绑定图片后，实现点击图片放大效果

你好

具体就是这样的，可以通过脚本来实现。

<%@ 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>

可参考：http://www.code-123.com/html/200999202053580.html

Friday, January 29, 2010 7:04 AM

<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title>无标题页</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><script language=javascript> function move(event) {       var ei = document.getElementById("enlarge_images");       event = event || window.event;		ei.style.display = "block";		ei.innerHTML = '<img src="' + event.srcElement.src + '" />';		ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";		ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px"; }  function out(event) {       var ei = document.getElementById("enlarge_images");        ei.innerHTML = "";		ei.style.display = "none"; }</script></head><body tyle="text-align:center">    <form id="form1" runat="server">    <div>        <asp:DataList ID="DataList1" runat="server" RepeatColumns="2">        <ItemTemplate>          <img  src="img/50579.jpg50579.jpg" onmouseover="move();" onmouseout="out();"/>                        <div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px" class="demo">	       <img src="//www.lanrentuku.com/images/uppic/200801101244190.jpg" onmouseover="move();" onmouseout="out();">            </div>                   </ItemTemplate>        </asp:DataList></div>           <div id="enlarge_images" style="width:200px;"></div>    </form></body></html>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。