求一段关于图片展示的js代码,该怎么处理

求一段关于图片展示的js代码

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script>

function big(img){

	//在元素右边弹出div


}


</script>


</head>


<body>

<table>

<tr><td>

<img src="../picture/AV114005.jpg" width="60px" height="60px"  onmouseover="big(this)" onmouseout="small(this)"/>

</td>

<td>--------------------------------------</td>

</tr>

<tr><td>

<img src="../picture/AV114005.jpg" width="60px" height="60px" />

</td>

<td>--------------------------------------</td>

</tr>

<tr><td>

<img src="../picture/AV114005.jpg" width="60px" height="60px"  />

</td>

<td>--------------------------------------</td>

</tr>

</body>

</html>

上面是测试代码，想写个js代码让，鼠标移动上图片时，在图片的旁边弹出这个图片按比例放大的图。
如下：
求一段关于图片展示的js代码,该怎么处理

网上也参考了很多，但就是没满意的，请大神们帮助。

------解决方案--------------------
<script type="text/javascript">

        $(function () {
            var x = 10;
            var y = 20;
            $("a.tooltip").mouseover(function (e) {
                this.myTitle = this.title;
                this.title = "";
                var imgTitle = this.myTitle ? "<br/>" + this.myTitle : "";
                var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/>" + imgTitle + "<\/div>"; //创建 div 元素
                $("body").append(tooltip); //把它追加到文档中
                $("#tooltip")
.css({
    "top": (e.pageY + y) + "px",
    "left": (e.pageX + x) + "px"
}).show("fast");   //设置x坐标和y坐标，并且显示
            }).mouseout(function () {
                this.title = this.myTitle;
                $("#tooltip").remove();  //移除
            }).mousemove(function (e) {
                $("#tooltip")
.css({
    "top": (e.pageY + y) + "px",
    "left": (e.pageX + x) + "px"
});
            });
        });

    </script>

<style type="text/css">
        body { margin: 0; padding: 40px; background: #fff; font: 80% Arial, Helvetica, sans-serif; color: #555; line-height: 180%; }
        img { border: none; }
        ul, li { margin: 0; padding: 0; }
        li { list-style: none; float: left; display: inline; margin-right: 10px; border: 1px solid #AAAAAA; }
        #tooltip { position: absolute; border: 1px solid #ccc; background: #333; padding: 2px; display: none; color: #fff; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <h3>
        有效果：</h3>
    <ul>
        <li><a href="Images/1.jpg" class="tooltip" title="风光 iPod">
            <img src="Images/1.jpg" alt="风光 iPod"  style=" width:50px; height:80px;"/></a></li>

求一段关于图片展示的js代码,该怎么处理

相关推荐