jQuery 智能截断指定长度的文本和提示效果，其实使用时候大可不必这样搞，CSS就能轻易实现这一功能，这里只是为了展现一下jquery的强大功能，学习jQuery的朋友可参阅。提示的功能是比较实用的，可有效提升你的网页用户体验，提醒一下：如果预览时提示有错误，可刷新一下页面，因为远程调用了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> <title>jQuery智能截断指定长度的文本和提示效果丨石家庄展柜制作|梨花粉价格</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> 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;} </style> <script type="text/javascript" src="/images/jquery1.3.2.js"></script> <script type="text/javascript"> $(function(){ $(".div ul li").hover(function(e){ var x=e.pageX; var y=e.pageY; var div=$("<div id=‘div_show‘></div>"); var text=$(this).html(); $(this).append(div); $("#div_show").html(text).css({"height":"25px","position":"absolute","zIndex":"99","backgroundColor":"#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(); }) }) </script> </head> <body> 预览时会提示错误而不显示效果，刷新一下就可以了；在实际使用中不会出现这样的问题。<br> <div class="div"> <ul> <li> <a title="超级漂亮的几款清新、常用的网页CSS布局配色实例" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1061.htm"> 超级漂亮的几款清新、常用的网页CSS布局配色实例</a></li> <li> <a title="CSS制作斜角上有背景图片的Div层" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1060.htm"> CSS制作斜角上有背景图片的Div层</a></li> <li> <a title="Js实现的层展开、层折叠效果，默认时候层是折叠的" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1059.htm"> Js实现的层展开、层折叠效果，默认时候层是折叠的</a></li> <li> <a title="DIV始终固定在网页右下角位置的CSS实现方法" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1058.htm"> DIV始终固定在网页右下角位置的CSS实现方法</a></li> <li> <a title="JavaScript未知高度元素的垂直居中的方法" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1057.htm"> JavaScript未知高度元素的垂直居中的方法</a></li> </ul> </div> </body> </html> <br><br><br><br><br><bR><br><br><br><bR>所需js文件：<a href=/images/jquery1.3.2.js">jquery1.3.2.js</a><hr>
时间： 2025-01-04 07:49:25