下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。
内存溢出小编现在分享给大家，也给大家做个参考。
<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><head><Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" /><Title>鼠标划过展示大图</Title><style type="text/CSS">* { 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(http://images.51wan.com/gameImages/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><script type="text/JavaScript" src="http://code.jquery.com/jquery-1.4.4.min.Js"></script> <script type="text/JavaScript"> $(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> <td><div><b>15</b><a ID="g1" href="#">名称1</a></div></td> <td><div><b>16</b><a ID="g2" href="#">名称2</a><br /> <a ID="g3" href="#">名称3</a></div></td> <td><div><b>15</b><a ID="g3" href="#">名称1</a></div></td> <td><div><b>15</b><a ID="g4" href="#">名称1</a></div></td> </tr> <tr> <td><div><b>15</b><a ID="g5" href="#">名称1</a></div></td> <td><div><b>15</b><a ID="g6" href="#">名称1</a></div></td> <td><div><b>16</b><a ID="g7" href="#">名称2</a><br /> <a ID="g8" href="#">名称3</a></div></td> <td><div><b>16</b><a ID="g9" href="#">名称2</a><br /> <a ID="g3" href="#">名称3</a></div></td> </tr> <tr> <td><div><b>16</b><a ID="g11" href="#">名称2</a><br /> <a ID="g12" href="#">名称3</a></div></td> <td><div><b>16</b><a ID="g13" href="#">名称2</a><br /> <a ID="g14" href="#">名称3</a></div></td> <td><div><b>15</b><a ID="g15" href="#">名称1</a></div></td> <td><div><b>15</b><a ID="g16" href="#">名称1</a></div></td> </tr> </table> <div ID="hIDeBox"><a href="">大图展示</a></div></div></body></HTML> 以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的鼠标移上元素显示大图全部内容，希望文章能够帮你解决鼠标移上元素显示大图所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）