Dom与Event简洁代码实现文本展开收起
Xuijs超轻量级的框架 Dom与Event实现文本展开收起 效果图
示例代码
<!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=utf-8" />
<title>XuijsDemo</title>
<script src="content/scripts/xui-2.2.0.min.js"></script>
<script src="content/scripts/emile.js"></script>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
background:#F5F6FA;
}
#container {
overflow:hidden;
position:absolute;
left:0;
top:0;
width:320px;
height:480px;
}
#carda {
position:absolute;
left:0;
top:0;
width:320px;
height:480px;
background:#0073AA;
}
#cardb {
position:absolute;
left:0;
top:500px;
width:320px;
height:480px;
background:#0073AA;
}
h1 {
text-align:center;
}
button {
display:block;
font-size:2em;
width:280px;
margin:0 auto 20px auto;
}
</style>
<script>
function initialise()
{
styleshow();
dom();
fx(); }
//dom处理
function dom()
{
var o = x$('#lrc');
var s = o.html()+'';
var p =SubString(s);
x$('#lrcstr').html('inner', p);
x$('#lrcbtn').html('inner', p.length > 235 ? "点击展开" : "");
x$('#lrcbtn').on( 'click', function(e) {
var lrcbtnstr=x$('#lrcbtn').html()+"";
if(lrcbtnstr=="点击展开")
{
x$('#lrcstr').html('inner', s);
x$('#lrcbtn').html('inner', '点击收起');
}
else{
x$('#lrcbtn').html('inner', p.length > 235 ? "点击展开" : "");
x$('#lrcstr').html('inner', p);
}
// alert(x$('#lrcbtn').html());
});
x$('#lrc').html("");
//alert(s);
}
function SubString(s){
var str; // 声明变量。
str = s.substr(1,236); // 截取取字符串。
return(str); // 返回字符串。
}
//style 样式处理
function styleshow()
{ }
//style 动画、形变、渐变
function fx()
{ } </script>
</head>
<body onload="initialise();">
<div id="carda">
<div id="lrc"> Come Here
Artist: Kath Bloom There's wind that blows in from the north.
And it says that loving takes this course.
Come here. Come here.
No I'm not impossible to touch
I have never wanted you so much.
Come here. Come here.
Have I never laid down by your side.
Baby, let's forget about this pride.
Come here. Come here.
Well I'm in no hurry.
Don't have to run away this time.
I know you're timid.
But it's gonna be all right this time.
There's wind that blows in from the north.
And it says that loving takes this course.
Come here. Come here.
---END--- </div>
<br />
<div id="lrcstr"></div>
<br />
<div id="lrcbtn"></div>
<br />
</div>
</body>
</html>
代码示例包
声明：本博客高度重视知识产权保护，发现本博客发布的信息包含有侵犯其著作权的链接内容时，请联系我，我将第一时间做相应处理,联系邮箱ffgign@qq.com。
作者：Mark Fan (小念头) 来源：http://cube.cnblogs.com
说明：未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。如有疑问，可以通过 ffgign@qq.com 联系作者，本文章采用 知识共享署名-非商业性使用-相同方式共享 2.5 *许可协议进行许可
