本文实例讲述了jQuery实现鼠标划过展示大图的方法。分享给大家供大家参考。具体如下： 这里用css和jquery实现鼠标移上元素时大图展示，并且大图不能溢出整个div框 复制代码 代码如下: jQuery鼠标划过展示大图 <br /> * { margin:0; padding:0; }<br /> body { font:12px/1.5 tahoma, arial, simsun; }<br /> .wrap { position:relative; margin:0 auto; width:319px; height:243px; }<br /> table { border-collapse:collapse; border-spacing:0; }<br /> td { border:1px solid #ccc; background:#f0f0f0; width:80px; height:80px; }<br /> td div { position:relative; width:100%; height:100%; background:#eee; }<br /> td b { display:block; position:relative; z-index:20; width:20px; height:20px; background:#fff; }<br /> 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; }<br /> #hideBox { display:none; position:absolute; width:140px; height:120px; background:#fff; border:1px solid #333; z-index:300; }<br /> #hideBox a { display:block; height:100%; width:100%; }<br /> <br /> $(document).ready(function(){ <br /> var wrapWidth = $(".wrap").width();<br /> var wrapHeight = $(".wrap").height();<br /> var boxWidth = $("#hideBox").outerWidth();<br /> var boxHeight = $("#hideBox").outerHeight(); <br /> $("td a").mouseover(function(){ <br /> var pos = $(this).parent("div").position();<br /> var toLeft = wrapWidth - (boxWidth + pos.left);<br /> var toTop = wrapHeight - (boxHeight + pos.top);<br /> if(toLeft>0){<br /> $("#hideBox").css({left:pos.left});<br /> }<br /> else if(toLeft<0){<br /> $("#hideBox").css({left:wrapWidth-boxWidth});<br /> }<br /> if(toTop>0){<br /> $("#hideBox").css({top:pos.top});<br /> }<br /> else if(toTop<0){<br /> $("#hideBox").css({top:wrapHeight-boxHeight});<br /> } <br /> $("#hideBox").show(); <br /> });<br /> $("#hideBox").mouseout(function(){<br /> $(this).hide();<br /> }); <br /> });<br /> 15名称1 16名称2 名称3 15名称1 15名称1 15名称1 15名称1 16名称2 名称3 16名称2 名称3 16名称2 名称3 16名称2 名称3 15名称1 15名称1 大图展示 希望本文所述对大家的jQuery程序设计有所帮助。
