<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=">
<title>this is a test for js</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<style type="text/css">
    body {
    background:#ccc;
    }
    ul {
        padding:0px;
        margin:80 auto;
        width:810px;
        list-style-type:none;
          
    }
    ul li {
        float:left;
        margin:0px 10px;
    }
    ul li img {
        border:1px solid #aaa;
    }
</style>
</head>
<body>
<ul>
    <li><a href="p_w_picpaths/7-0.jpg" title="meinv7" class="big"><img src="p_w_picpaths/7-1.jpg" alt="meinv1" /></a></li>
    <li><a href="p_w_picpaths/8-0.jpg" title="meinv8" class="big"><img src="p_w_picpaths/8-1.jpg" alt="meinv2" /></a></li>
    <li><a href="p_w_picpaths/10-0.jpg" title="meinv10" class="big"><img src="p_w_picpaths/10-1.jpg" alt="meinv3" /></a></li>
    <li><a href="p_w_picpaths/11-0.jpg" title="meinv11" class="big"><img src="p_w_picpaths/11-1.jpg" alt="meinv4" /></a></li>
</ul>
<script type="text/javascript">
    $(function(){
        var x = 10;
        var y = 20;
        $("a.big").mouseover(function(e){
            this.mytitle = this.title;
            this.title = "";
            var imgtitle = this.mytitle? "" +this.mytitle : "";
            //alert(this.title);
            var bigdiv = "<div id='bigdiv' style='position:absolute;border:1px solid pink'><div id='content' style='background:#000;color:#fff;position:absolute;bottom:0px;text-align:center;width:100%;opacity:0.5'>"+imgtitle+"</div><img src='"+this.href+"' alt='产品预览图' /></div>";
            $("body").append(bigdiv);
            $("#bigdiv").css({
                "top": (e.pageY+y) + "px",
                "left": (e.pageX+x) + "px"
            }).show("fast");
        }).mouseout(function(){
            this.title = this.mytitle;
            $("#bigdiv").remove();
        }).mousemove(function(e){
            $("#bigdiv").css({
                "top": (e.pageY+y) + "px",
                "left": (e.pageX+x) + "px"
            });
        });
    })
</script>
</body>
</html>