源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

asp.net下用js实现鼠标移至小图,自动显示相应大图

  • 时间:2020-02-25 17:47 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:asp.net下用js实现鼠标移至小图,自动显示相应大图
实现根据后台绑定小图片,鼠标移至小图,自动显示相应大图  .Net精简版本  <script language="JavaScript">         function GetShowImg(imgfile)      {      document.all("ShowImage").src = "/semir/images/"+ imgfile;     }          </script>    //DataList绑定   <asp:datalist id="DlSides" runat="server" OnItemCommand="DlSides_ItemCommand" RepeatDirection="Horizontal"        RepeatColumns="3" DataKeyField="SideID" CssClass="semirText">              <ItemTemplate>         <a onmouseover="GetShowImg('<%# DataBinder.Eval(Container.DataItem, "sidePath")%>')"><IMG style="WIDTH: 45px; HEIGHT: 56px" alt="" src='/semir/images/small<%# DataBinder.Eval(Container.DataItem, "sidePath")%>' border=0 ></a>                  </ItemTemplate>       </asp:datalist>  // 显示相应大图  <img name="ShowImage">   ASP完整版  <script language="JavaScript">      function ImagePreload()       {       var args = ImagePreload.arguments;      document.ImgPreArray = new Array(args.length);      for(var i=0; i<args.length; i++)       {      document.ImgPreArray[i] = new Image;      document.ImgPreArray[i].src = "admin/upfile/newbook/"+ args[i];      }      }       function fitSize() {        var a, b;        var imgobj = document.all("ShowImage");        var oldimg = new Image();        oldimg.src = imgobj.src;        var dw = oldimg.width;        var dh = oldimg.height;        if(imgobj == null) {         setTimeout("fitSize()", 50);         return;        }        if(imgobj.offsetWidth == 0) {         setTimeout("fitSize()", 50);         return;        }        var maxW = 300;        var maxH = 270;        if(dw>maxW || dh>maxH) {         a = dw/maxW;         b = dh/maxW;          if(b>a) a=b;         dw = dw/a;         dh = dh/a;        }        if(dw > 0 && dh > 0) {         imgobj.width = dw;         imgobj.height = dh;        }       }       function GetShowImg(imgtext, imgfile) {        document.all("ShowImgText").innerHTML = imgtext;        document.all("ShowImage").src = "admin/upfile/newbook/"+ imgfile;        document.all("ShowImage").width = 267;        document.all("ShowImage").height = 267;        //fitSize();'show picture size       }       function ShowTextDetail(n) {        for (i=1; i<5; i++) {         document.all("TextDetail"+i).style.display = "none";        }        document.all("TextDetail"+n).style.display = "";        for (i=1; i<4; i++) {         document.all("TitleDetail"+i).className = "shopTabOff";        }        if (n < 4) {         document.all("TitleDetail"+n).className = "shopTabOn";        }       }        </script>        <script language="JavaScript" for="window" event="onload">       ImagePreload('<%=rs("picture")%>');        </script>  '---------调用-显示-------   <%if rs("picture")<>"" then %>                          <a style="cursor:hand">                           <img name="ShowImage" src="admin/upfile/newbook/<%=rs("picture")%>" border="0" width="267" height="267">         <!--  <img name="ShowImage" src="../upimages/F_060524_000613_46398.jpg" border=0 onload="fitSize();"> -->                          </a> <span id="ShowImgText" style="font-weight: bold;"></span>                           <% end if %>  ‘--------------鼠标移过的图片------   <% if rs("picture")<>"" then%>           <a onmouseover="GetShowImg('','<%=rs("picture")%>');">                                 <img name="Image71" src="admin/upfile/newbook/<%=rs("picture")%>" alt="dogo" width="40" height="30" border="0"></a>                                 <%end if%> 
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部