鼠标经过小图显示大图和详细信息

本帖最后由 qiqishardgel 于 2013-04-16 11:11:13 编辑

解决方案 »

  1.   

    这就样式问题，
    建议楼主用firebug弄出来看下 并可以在firebug里直接更改看效果 修改好了然后把代码拷贝到源代码里去
      

  2.   

    我晕，我要是自己能看不就看了吗 问题是我机器上按不上那个firebug，真服了！！！
      

  3.   

    我记得有现成的jQuery插件的。
      

  4.   

    弄个插件吧，或者自己写一个。举例：<!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 runat="server">
        <title>无标题页</title>
        <style type="text/css">
            *{ margin:0; padding:0;}
            img{ border:none;}
            
            .content{ width:1100px; margin:0 auto;}
            .imglist{ width:1100px;}
            .imglist img{ float:left; margin-right:5px;}
            #HintImg{ position:absolute; padding:0; margin:0; display:none; z-index:999}
        </style>
    </head>
    <body>
        <div class="content">
            <div style="height:50px;"></div>
            <div class="imglist">
                <img alt="" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg" 
                    shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
                <img alt="" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg" 
                    shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
                <img alt="" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg" 
                    shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
                <img alt="" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg" 
                    shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
                <img alt="" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg" 
                    shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />    
            </div>
        </div>
        <div id="HintImg"></div>
        <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(".imglist img").hover(function() {
                $("*").stop(); //停止所有正在运行的动画
                var offset = $(this).offset(); //取得事件对象的位置
                var _left = (offset.left + $(this).width() + $("#HintImg").width() < 1100) ? (offset.left + $(this).width()) : (offset.left - $("#HintImg").width());
                $("#HintImg").html('<img alt="" title="" src="' + $(this).attr("shouimg") + '" />').css({ "top": offset.top + "px", "left": _left + "px" }).fadeIn(500);
            }, function() {
                $("#HintImg").hide();
            });
        </script>
    </body>
    </html>