兼容性非常好的jquery弹出层特效

作者:sky 点击:300 评论:0 发布时间:周六, 06/27/2009 - 11:08 所属分类:表格图层

jquery弹出层特效，兼容性非常好，简单易用，鼠标经过时弹出，自定义样式。

<!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=gb2312" /> <meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！" /> <title>网页特效兼容性非常好的jquery弹出层特效站长特效网</title> <style type="text/css"> .examples_body p { margin-bottom: 10px; clear: both; } .examples_body p a { width: 150px; font-size: 1.5em; color: #DDD; border: 2px solid #DDD; padding: 5px 0; display: block; text-align: center; } .tooltip { width:250px; position: absolute; z-index: 999; left: -9999px; background-color: #dedede; padding: 5px; border: 1px solid #fff; } .tooltip p { color: #fff; background-color: #222; padding: 7px 7px; margin: 0; } </style> <script type="text/javascript" src="/img/jquery_zzjs.js"></script> <script type="text/javascript"> function simple_tooltip(target_items, name){ $(target_items).each(function(i){ $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>"); var my_tooltip = $("#"+name+i); $(this).removeAttr("title").mouseover(function(){ my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400); }).mousemove(function(kmouse){ my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15}); }).mouseout(function(){ my_tooltip.fadeOut(400); }); }); }//欢迎来到站长x特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 $(document).ready(function(){ simple_tooltip("a.zzjs_net","sunflowamedia"); });//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 </script> </head> <body> <a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> 需要加载js文件，请刷新后看效果。<br /> <p><a href="" class="zzjs_net">站长特效提示您：鼠标经过这里看看</a></p> <div id="sunflowamedia0" class="tooltip"><p>站长特效网，国内一流网页特效广告代码！欢迎收藏本站！</p></div> </body> </html>

提示：你可以先修改部分代码再运行。

顶一下

(0)

100%

踩一下

(0)

100%

标签: