跨平台移动开发 Xuijs超轻量级的框架 Dom与Event简洁代码实现文本展开收起

最新推荐文章于 2019-05-01 17:13:12 发布

weixin_30588729

最新推荐文章于 2019-05-01 17:13:12 发布

阅读量90

点赞数

文章标签：移动开发 xhtml

原文链接：http://www.cnblogs.com/cube/p/3438828.html

版权

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 中国大陆许可协议进行许可

转载于:https://www.cnblogs.com/cube/p/3438828.html

weixin_30588729

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨平台移动开发 Xuijs超轻量级的框架 Dom与Event简洁代码实现文本展开收起

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">...
复制链接

扫一扫