鼠标移到小图片上后加载预览大图片，不知为什么预览的大图片层框大小无法改变？！

本帖最后由 kwdpx 于 2011-11-28 23:04:36 编辑

解决方案 »

  1.   

    previewImage.style.height=maxHeight+'px';把style去掉
      

  2.   

    我很想把我闲的时候写的一个给你分享，但这里输入不了，内容过长，不过你可以去看。
    http://www.geminideal.com/我的一个网站 随便点一个产品，然后你可以把Css，js,html下载一份下来然后再分离出来就可以用了。  记得给分
      

  3.   

    <IMG SRC="large.gif" WIDTH="20" Height="20">
     这样写，
    至于外边的div就不用管了
      

  4.   

    这里有个和你要的一样，
    我刚看了，
    希望对你有帮助
    http://www.oschina.net/code/snippet_70229_3026
      

  5.   


    答非所问，至少你得把我的代码复制保存为.htm文件，再打开看一下效果再说啊，随便乱发一个网址，根本牛头不对马嘴
      

  6.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <title>类似淘宝网的图片放大代码</title>
    <script type="text/javascript" src="D:\User\桌面\弹窗测试_\jquery-1.3.2.min.js"></script><style type="text/css">
    #tip   {position:absolute;color:#333;display:none;}
    #tip s   {position:absolute;top:40px;left:-20px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #BBA transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;}
    #tip s i   {position:absolute;top:-10px;left:-8px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #fff transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;}
    #tip .t_box   {position:relative;background-color:#CCC;filter:alpha(opacity=50);-moz-opacity:0.5;bottom:-3px;right:-3px;}
    #tip .t_box div  {position:relative;background-color:#FFF;border:1px solid #ACA899;background:#FFF;padding:1px;top:-3px;left:-3px;}
     
    .tip   {width:182px;height:182px;border:1px solid #DDD;}
    </style>
    <script type="text/javascript">
    $(function(){
       $('.tip').mouseover(function(){
          var $tip=$('<div id="tip"><div class="t_box"><div><s><i></i></s><img width="100px" height="600px" src="'+this.src+'" /></div></div></div>');//修改图片大小
          $('body').append($tip);
          $('#tip').show('fast');
       }).mouseout(function(){
          $('#tip').remove();
       }).mousemove(function(e){
          $('#tip').css({"top":(e.pageY-60)+"px","left":(e.pageX+130)+"px"})
       })
    })
    </script>
    <p> </p>
    <a href="/"><img class="tip" src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a>
    <a href="#"><img class="tip" src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a>
    <a href="#" ><img class="tip" src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a>修改图片大小
      

  7.   

    哦，不好意思，貌似又看错了，不过你这个加个 max- 是干什么的。。div#PreviewBox div.Picture div a img{
       margin:19px;
       border:1px #b6b6b6 solid;
       display: block;
       max-height: 270px;
       max-width: 270px;
    }换这样子不就可以了
    div#PreviewBox div.Picture div a img{
       margin:19px;
       border:1px #b6b6b6 solid;
       display: block;
       height: 270px;
       width: 270px;
    }
      

  8.   


    去掉max-是成正方型了，但里面的图片被拉伸变形了，我需要外框是正方型，而里面图片保持原比例不变，请指教，谢谢！！！