jQuery实现行文字链接提示效果的方法.pdfVIP

这篇文章主要介绍了 jQuery 实现行文字链接提示效果的方法 ,实例分析了 jQuery 操作文 字提示效果的方法 ,具有一定参考借鉴价值 ,需要的朋友可以参考下 本文实例讲述了 jQuery 实现行文字链接提示效果的方法。分享给大家供大家参考。具 体实现方法如下： 代码如下 : lt;!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN gt; lt;html xmlns=gt; lt;headgt; lt;meta http-equiv=Content-Type content=text/html; charset=gb2312 /gt; lt;titlegt; 一行文字的提示效果 lt;/titlegt; lt;script type=text/javascript src=/ajaxjs/jquery1.3.2.jsgt;lt;/scriptgt; lt;script type=text/javascriptgt; $(function(){ $(.div ul li).hover(function(e){ var x=e.pageX; var y=e.pageY; var div=$(lt;div id=div_showgt;lt;/divgt;); var text=$(this).html(); $(this).append(div); $(#div_show).html(text).css({height:25px,position:absolute,zIndex:99,background Color:#38F758,whiteSpace:nowrap,paddingLeft:15px,paddingRight:15px,top:y+ 10+px,left:x+10+px}); $(this).children(#div_show).show(); },function(){ $(this).children(#div_show).remove(); }) }) lt;/scriptgt; lt;style type=text/cssgt; ul{ margin:0; padding:0;} ul li{ list-style:none;} .div{ width:200px; float:left; display:inline; } .div ul li{ width:220px; padding:0px 6px; line-height:25px; height:25px; margin-top:1px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} lt;/stylegt; lt;/headgt; lt;bodygt; lt;div class=divgt; lt;ulgt; lt;ligt; 好吧，现在流行 HTML5 ，我就给它标题加上个 HTML5 吧lt;/ligt; lt;ligt;Raphael js 库是在 webrebuild 交流会上听到的 lt;/ligt; lt;ligt; 我们来简单了解一下上文中提到的 css appearancelt;/ligt; lt;/ulgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; 希望本文所述对大家的 jQuery 程序设计有所帮助。 更多信息请查看