移上显示大图
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<style type="text/css">
#tbList{ border-left: 1px solid #66bdff;border-top: 1px solid #66bdff;margin:auto}
#tbList th,td{ border-right: 1px solid #66bdff;border-bottom : 1px solid #66bdff;padding: 10px}
#bigimage { position:fixed; display:none; }
#bigimage img { width:400px; height:400px; padding:5px; background:#fff; border:1px solid #e3e3e3; }
</style>
<script type="text/javascript">
$(function() {
$("#tbList img").hover(function (e) {
$("body").append('<p id="bigimage"><img src="' + this.src + '" alt="" /></p>');
$(this).stop().fadeTo(500, 0.5);
widthJudge(e);
$("#bigimage").fadeIn('fast');
}, function () {
$("#bigimage").remove();
});
$("img").mousemove(function (e) {
widthJudge(e);
});
});
function widthJudge(e) {
var marginRight = document.documentElement.clientWidth - e.pageX; //可见区域宽度-事件源x坐标
var imageWidth = $("#bigimage").width();
if (marginRight < imageWidth) {
$("#bigimage").css({ top: e.pageY, left: (e.pageX - 22) + 'px' });
} else {
$("#bigimage").css({ top: e.pageY, left: (e.pageX + 22) + 'px' });
};
}
</script>
</head>
<body>
<!--<div id="div1">
<input type ="button"/><input type ="button"/><input type="button"/>
</div>-->
<!-- <input type="button"/>
<input type="checkbox"/><input type="checkbox"/><input type ="checkbox"/>-->
<table id="tbList" >
<tr>
<th><input type="checkbox"/></th>
<th >ID</th>
<th>班级名</th>
<th>班级Logo</th>
<th>日期</th>
<th>操作</th>
</tr>
<tr id="tr1">
<td><input type="checkbox" name="chkS" value="1" /></td>
<td>1</td>
<td >0710班</td>
<td><img src="images/2.jpg" width="60px" height="60px" alt="班级Logo" /></td>
<td>2011-01-02</td>
<td>改</td>
</tr>
<tr id="tr2">
<td><input type="checkbox" name="chkS" value="2" /></td>
<td>2</td>
<td>0810班</td>
<td><img src="images/2.jpg"width="60px" height="60px" alt="班级Logo" /></td>
<td>2011-01-05</td>
<td>改</td>
</tr>
<tr id="tr3">
<td><input type="checkbox" name="chkS" value="3" /></td>
<td>3</td>
<td>0910班</td>
<td><img src="images/2.jpg"width="60px" height="60px" alt="班级Logo" /></td>
<td>2011-01-03</td>
<td>改</td>
</tr>
</table>
</body>
