移上顯示大圖

標籤：style   io   os   ar   java   sp   div   on   cti   

<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; }
.style1
{
width: 192px;
}
</style>
<script type="text/javascript">
$(function() {

var x = 22;
var y = 20;

$("#tbList img").hover(function (e) {
$("body").append(‘<p id="bigimage"><img src="‘ + this.src + ‘" /></p>‘);
$(this).stop().fadeTo(500, 0.5);
widthJudge(e);
$("#bigimage").fadeIn(‘fast‘);

$(‘#dlg‘).dialog(‘open‘);
}, 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) {
x = imageWidth + 22;
//$("#bigimage").css({ top: (e.pageY - y) + ‘px‘, left: (e.pageX - x) + ‘px‘ });
$("#bigimage").css({ top: e.pageY, left: (e.pageX - x) + ‘px‘ });
} else {
x = 22;
var pHeight = screen.availHeight;
$("#bigimage").css({ top: e.pageY, left: (e.pageX + x) + ‘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>

移上顯示大圖