zoukankan      html  css  js  c++  java
  • [原]鼠标移至小图,自动显示相应大图

    实现根据后台绑定小图片,鼠标移至小图,自动显示相应大图

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


     

  • 相关阅读:
    python datetime unix时间戳以及字符串时间戳转换
    Linux下Shell的for循环语句
    分布式学习最佳实践:从分布式系统的特征开始(附思维导图)
    什么是分布式系统,如何学习分布式系统
    Spring Boot 之发送邮件
    v8是怎么实现更快的 await ?深入理解 await 的运行机制
    分布式=高并发=多线程
    半个月使用rust语言的体验
    Enter Query Mode Search Tricks Using Enter_Query Built-in in Oracle Forms
    How to Log Users Login and Logout Details Through Oracle Forms
  • 原文地址:https://www.cnblogs.com/skylaugh/p/431240.html
Copyright © 2011-2022 走看看