zoukankan      html  css  js  c++  java
  • 跨平台移动开发 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">
    <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 中国大陆许可协议进行许可

    知识共享许可协议

  • 相关阅读:
    jmeter4-数据库性能测试
    jmeter2-接口性能测试
    jmeter1-测试流程
    jmeter-beanshell随机取数组一项
    最强MySQL数据库设计规范... (转载)
    Python词云
    adb常用命令
    jmeter线程组多个请求之间的参数关联
    VisualVM使用与调优案例
    mysql调优工具tuning-primer.sh的使用
  • 原文地址:https://www.cnblogs.com/cube/p/3438828.html
Copyright © 2011-2022 走看看