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