本文實例講述了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 表> 大圖展示 身體>
