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

Dom与Event简洁代码实现文本展开收起

Xuijs超轻量级的框架 Dom与Event实现文本展开收起 效果图

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

示例代码

 

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>XuijsDemotitle>
<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>

 

代码示例包

点击下载

 声明:本博客高度重视知识产权保护,发现本博客发布的信息包含有侵犯其著作权的链接内容时,请联系我,我将第一时间做相应处理,联系邮箱[email protected]

 


作者:Mark Fan (小念头)    
来源:http://cube.cnblogs.com
说明:未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。如有疑问,可以通过 [email protected] 联系作者,本文章采用 知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可

知识共享许可协议

 

 

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

你可能感兴趣的:(跨平台移动开发 Xuijs超轻量级的框架 Dom与Event简洁代码实现文本展开收起)