当前位置: 移动技术网 > IT编程>开发语言>.net > asp.net下用js实现鼠标移至小图,自动显示相应大图

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

2018年04月28日  | 移动技术网IT编程  | 我要评论

天庭剩女txt新浪,南昌师范高等专科,时间线杂志

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

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

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网