jQuery实现鼠标划过展示大图的方法
本文实例讲述了jQuery实现鼠标划过展示大图的方法。分享给大家供大家参考。具体如下：
这里用css和jquery实现鼠标移上元素时大图展示，并且大图不能溢出整个div框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jQuery鼠标划过展示大图</title>
<styletype="text/css">
*{margin:0;padding:0;}
body{font:12px/1.5tahoma,arial,simsun;}
.wrap{position:relative;margin:0auto;width:319px;height:243px;}
table{border-collapse:collapse;border-spacing:0;}
td{border:1pxsolid#ccc;background:#f0f0f0;width:80px;height:80px;}
tddiv{position:relative;width:100%;height:100%;background:#eee;}
tdb{display:block;position:relative;z-index:20;width:20px;height:20px;background:#fff;}
tda.s{display:block;position:absolute;z-index:10;left:0;top:0;height:100%;width:100%;text-indent:-999em;overflow:hidden;background:url(Images/nb/8080logo.jpg)no-repeat;}
#hideBox{display:none;position:absolute;width:140px;height:120px;background:#fff;border:1pxsolid#333;z-index:300;}
#hideBoxa{display:block;height:100%;width:100%;}
</style>
<scripttype="text/javascript"src="js/jquery-1.4.4.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
varwrapWidth=$(".wrap").width();
varwrapHeight=$(".wrap").height();
varboxWidth=$("#hideBox").outerWidth();
varboxHeight=$("#hideBox").outerHeight();
$("tda").mouseover(function(){
varpos=$(this).parent("div").position();
vartoLeft=wrapWidth-(boxWidth+pos.left);
vartoTop=wrapHeight-(boxHeight+pos.top);
if(toLeft>0){
$("#hideBox").css({left:pos.left});
}
elseif(toLeft<0){
$("#hideBox").css({left:wrapWidth-boxWidth});
}
if(toTop>0){
$("#hideBox").css({top:pos.top});
}
elseif(toTop<0){
$("#hideBox").css({top:wrapHeight-boxHeight});
}
$("#hideBox").show();
});
$("#hideBox").mouseout(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<divclass="wrap">
<table>
<tr>
<td><div><b>15</b><aid="g1"class="s"href="#">名称1</a></div></td>
<td><div><b>16</b><aid="g2"href="#">名称2</a><br/>
<aid="g3"href="#">名称3</a></div></td>
<td><div><b>15</b><aid="g3"class="s"href="#">名称1</a></div></td>
<td><div><b>15</b><aid="g4"class="s"href="#">名称1</a></div></td>
</tr>
<tr>
<td><div><b>15</b><aid="g5"class="s"href="#">名称1</a></div></td>
<td><div><b>15</b><aid="g6"class="s"href="#">名称1</a></div></td>
<td><div><b>16</b><aid="g7"href="#">名称2</a><br/>
<aid="g8"href="#">名称3</a></div></td>
<td><div><b>16</b><aid="g9"href="#">名称2</a><br/>
<aid="g3"href="#">名称3</a></div></td>
</tr>
<tr>
<td><div><b>16</b><aid="g11"href="#">名称2</a><br/>
<aid="g12"href="#">名称3</a></div></td>
<td><div><b>16</b><aid="g13"href="#">名称2</a><br/>
<aid="g14"href="#">名称3</a></div></td>
<td><div><b>15</b><aid="g15"class="s"href="#">名称1</a></div></td>
<td><div><b>15</b><aid="g16"class="s"href="#">名称1</a></div></td>
</tr>
</table>
<divid="hideBox"><ahref="">大图展示</a></div>
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。