鼠标移至小图,自动显示相应大图

转载 2006年06月21日 14:07:00

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

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


 

鼠标滑过小图出现大图

#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}#demo img{border:none;width:100px;...
  • YanMLover
  • YanMLover
  • 2007年11月12日 13:28
  • 836

jquery 的实现鼠标滑过显示大图

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 图片提示 ...
  • zizhilianqiu
  • zizhilianqiu
  • 2011年08月16日 10:55
  • 1568

小图轮播对应显示大图

自动轮播图     .dpcphdp{position: relative;overflow: hidden;width: 100%;margin-top: 10px;float: left...
  • a772116804
  • a772116804
  • 2017年12月13日 15:24
  • 95

js点击小图预览大图

function imgShow(_this){      var src = _this.attr("src");      $("#bigimg").attr("src", src);   ...
  • zyc922
  • zyc922
  • 2016年02月03日 16:33
  • 946

JQ实现点击小图显示大图

JQ实现点击小图显示大图代码块js,例如: /*图片*/ $('.imgJs').each(function() { var imgHeight = $(this).heigh...
  • wwj791859814
  • wwj791859814
  • 2017年08月12日 16:16
  • 505

资源大图切成小图

资源文件一般由plist文件和png文件组成,有时候我们想把网上下的大图切成小图。网上找了一通,基本都无法切成正确的小图,只好自己弄,正好这阵子想学习下QT,参考了cocos2dx中切图的源代码和pl...
  • comhaqs
  • comhaqs
  • 2015年09月08日 09:15
  • 742

js触碰小图换大图

.datu{ width:504px; height:480px; cursor:pointer;}  .datu img{ width:504px; height:480px;}  ....
  • u013728512
  • u013728512
  • 2014年02月22日 09:51
  • 811

分享一个点击小图切换大图的jquery,并说明一下原理

怎么才能实现点击小图切换大图呢? 首选我说一下思路,当点击小图的时候触发一个事件,当然小图有个big的路径,点击获取小图的big,然后根据大图的id,把获取big赋值给大图的src。思路就是这样,下...
  • u010674395
  • u010674395
  • 2015年01月20日 19:11
  • 3123

鼠标放上去小图显示大图

test #demo{overflow:hidden;width:120px;text-align:center;padding:10px;} #demo img{border:none;width:...
  • nextuntil
  • nextuntil
  • 2010年05月22日 11:00
  • 1583

点击小图显示大图JS效果插件

jQuery plugin : Fancy Zoom Author : DFC Engineering License : GPL Release version : 1.5 Releas...
  • youaregoo
  • youaregoo
  • 2013年05月28日 16:14
  • 2208
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标移至小图,自动显示相应大图
举报原因:
原因补充:

(最多只允许输入30个字)