我想实现当鼠标放到一张图片上时,图片变大,但是不会将旁边的图片挤动。但是将static变成absolute后,left为auto。。图片会变大,在以前图片的右下方一点点

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>    <script type="text/javascript">
            mouseOverPic = function(o) {
                var src = $(o).attr("src");
                var offset = $(o).offset();
                var left = offset.left;
                var top = offset.top + $(o).height();
                $("#divBigPic").css({ left: left, top: top });
                $("#divBigPic").html("<img src=" + src + " alt='' />");
                $("#divBigPic").show();
            }
            mouseOutPic = function(o) {
                $("#divBigPic").hide();
            }
        </script></head>
    <body>
        <div id="divBigPic" style="display: none; position: absolute; z-index: 10000; ">
        </div>
        <img src="images/1.jpg" width="20" height="20" alt="" onmouseover="mouseOverPic(this)"
            onmouseout="mouseOutPic(this)" />
    </body>
    </html>
    刚刚写的一个代码,用jquery做的,可以参考一下,测试通过的。