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

    知识共享许可协议

  • 相关阅读:
    寒假学习报告05
    寒假学习报告04
    微信推送信息,支付宝支付接口
    Vue组件生成依赖文件,contentype
    redis之列表字典操作
    drf版本控制redis基础
    drf分页器,url控制器,解析器,响应器
    drf认证权限频率
    drf视图认证组件
    drf序列化组件
  • 原文地址:https://www.cnblogs.com/cube/p/3438828.html
Copyright © 2011-2022 走看看