广

ASP.NET

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

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

    2018-05-03 14:17:05 次阅读 稿源:互联网
    广告
    实现根据后台绑定小图片,鼠标移至小图,自动显示相应大图 

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

    一起学吧部分文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与一起学吧进行文章共享合作。

    广告
    广告
    广告