鼠标移动到图片上时,显示大图片
HTML标签中的一部分,仅供参考
<tr>
<td><input type="checkbox"
class="checkbox1"/></td>
<td>1002</td>
<td>小猫咪</td>
<td><img src="img/02.jpg" height="100"
width="100" /></td>
//图片
<td>200</td>
<td><input type="button"
value="添加"/></td>
</tr>
<img id="imgTip" class="clsImg" src="img/04.jpg" /> //写在外面,隐藏显示,定位提示图片的位置
.clsImg{
position:absolute;
border:1px solid
#ccc;
width:200px;
height:200px;
display:none;
}
JS部分实现功能:
<script type="text/javascript"
src="../jquery-1.8.3.js"></script>
<script
type="text/javascript">
$(function(){
$("table tr:nth-child(odd)").css("background","#CCF"); //奇偶行变色
var x=5; var y=15;
$("table tr td img").mousemove(function(e) {
$("#imgTip").attr("src",this.src).css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show(600);
});
$("table tr td img").mouseout(function() {
$("#imgTip").hide();
});
/*复选框单机事件*/
$("#checkAll").click(function() {
if(this.checked){
$("table
tr td
input[type=checkbox]").attr("checked",true);
}else
{
$("table tr
td input[type=checkbox]").attr("checked",false);
}
});
});
</script>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。