jQuery智能截断指定长度的文本和提示效果

浏览数：64 / 时间：2015年06月09日

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>