参考资料：http://yuilibrary.com/yui/docs/resize/simple-resize.html
需求说明：用鼠标控制div的大小，并且根据大小相应的截断div中段落的文字。如图，用鼠标控制外部div的尺寸，在尺寸改变的同时，使左侧文字适应div的大小而进行文字截断，右边的事件不截断。
代码：
<html>
<head>
<base href="<%=basePath%>">
<title>文字截取</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="journal-content-article">
<ul class="list_ul">
<li>
<span><a>我校专业技术岗位等级聘任工作已结束</a></span>
<em>2012-07-21</em>
</li>
<li>
<span><a>踏寻历史踪迹 在实践中成长</a></span>
<em >2012-07-13</em>
</li>
<li>
<span><a>教师系列专业技术职务聘任结果</a></span>
<em2012-07-02</em>
</li>
<li>
<span ><a>我校小学部举行数学学科期末复习引路活动</a></span>
<em>2012-06-26</em>
</li>
<li>
<span ><a>我校举行"青蓝杯"教学大赛优胜...</a></span>
<em>2012-06-26</em>
</li>
<li>
<span><a>我校举行2012届毕业典礼</a></span>
<em>2012-06-26</em>
</li>
<li>
<span><a>教师系列专业技术职务聘任结果公告</a></span>
<em>2012-06-22</em>
</li>
</ul>
</div>
<script src="http://yui.yahooapis.com/3.9.0/build/yui/yui-min.js"></script>
<script type="text/javascript">
//YUI要用到的模块有node和resize-plugin
YUI().use('node','resize-plugin',function(Y){
var tag_arr = Y.all("a");//所有<a>标签做成的数组
var tag_strArr = new Y.Array(String);//所有<a>标签内容做成的数组
var tag_showStr = null;//每行文字显示的文字
var tag_lenArr = new Y.Array(String);//每行文字的长度
var tag_fontsize = 0;//文字像素
//YUI中的数组遍历操作用 数组名.each(function(item,index)){}
//其中item表示当前数组中的对象，index表示当前数组中对象的下标
tag_arr.each(function(item,index){
tag_strArr[index] = item.getHTML();
tag_lenArr[index] = item.getHTML().length;
});
/**获取文字像素*/
var div = Y.one(".journal-content-article");
var date = Y.one("em");
//YUI中获取CSS样式的方法是 元素.getStyle(属性名)
tag_fontsize = div.getStyle("fontSize");
/**pt与px的转换*/
var fsLen = tag_fontsize.length;
var fstail = tag_fontsize.toString().substring(fsLen-2, fsLen);
var maxLength = null;
switch(fstail)
{
case "pt":
tag_fontsize = parseInt(tag_fontsize)*4/3;
break;
case "em":
tag_fontsize = parseInt(tag_fontsize)*16;
break;
case "px":
tag_fontsize = parseInt(tag_fontsize);
break;
}
//我们已经引入了YUI的Resize模块，现在需要实例化一个接口
var resizeDiv = new Y.Resize({
node: ".journal-content-article"
});
/**监听div尺寸改变事件*/
//resize的事件有很多比如：start、mouseUp、end、resize等
resizeDiv.on("resize",function(){
/**获取div的宽度*/
var divWidth = parseInt(div.getStyle("width"));
var data_len = date.getHTML().length;
var data_width = tag_fontsize*(data_len);
maxLength = parseInt((divWidth-data_width)/tag_fontsize);//div最多能显示的字符长度
tag_arr.each(function(item,index){
if(tag_lenArr[index]>=maxLength)
{
tag_showStr = tag_strArr[index].substr(0,maxLength);
item.setHTML(tag_showStr);
}
});
});
});
</script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
