jQuery实现鼠标划过展示大图的方法_Javascript教程-查字典教程网

摘要：本文实例讲述了jQuery实现鼠标划过展示大图的方法。分享给大家供大家参考。具体如下：这里用css和jquery实现鼠标移上元素时大图展示，...

本文实例讲述了jQuery实现鼠标划过展示大图的方法。分享给大家供大家参考。具体如下：

这里用css和jquery实现鼠标移上元素时大图展示，并且大图不能溢出整个div框

复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery鼠标划过展示大图</title>

* { margin:0; padding:0; }

body { font:12px/1.5 tahoma, arial, simsun; }

.wrap { position:relative; margin:0 auto; width:319px; height:243px; }

table { border-collapse:collapse; border-spacing:0; }

td { border:1px solid #ccc; background:#f0f0f0; width:80px; height:80px; }

td div { position:relative; width:100%; height:100%; background:#eee; }

td b { display:block; position:relative; z-index:20; width:20px; height:20px; background:#fff; }

td a.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:1px solid #333; z-index:300; }

#hideBox a { display:block; height:100%; width:100%; }

</style>

$(document).ready(function(){

var wrapWidth = $(".wrap").width();

var wrapHeight = $(".wrap").height();

var boxWidth = $("#hideBox").outerWidth();

var boxHeight = $("#hideBox").outerHeight();

$("td a").mouseover(function(){

var pos = $(this).parent("div").position();

var toLeft = wrapWidth - (boxWidth + pos.left);

var toTop = wrapHeight - (boxHeight + pos.top);

if(toLeft>0){

$("#hideBox").css({left:pos.left});

}

else if(toLeft<0){

$("#hideBox").css({left:wrapWidth-boxWidth});

}

if(toTop>0){

$("#hideBox").css({top:pos.top});

}

else if(toTop<0){

$("#hideBox").css({top:wrapHeight-boxHeight});

}

$("#hideBox").show();

});

$("#hideBox").mouseout(function(){

$(this).hide();

});

</script>

</head>

<body>

<div>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。