zoukankan      html  css  js  c++  java
  • 展开伸缩文字

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style>
    #limittext{
    100%;
    position:relative;
    background-color:#ccc;
    color:black;
    font-size: 30px;
    padding-bottom: 30px;
    }
    .switch{
    text-align:center;
    cursor:pointer;
    font-size: 40px;
    font-weight:800;
    position:absolute;
    bottom:0;
    100%;
    height:40px;
    }
    </style>
    </head>
    <body>
    <div id="limittext" >
    <div class="content">
    这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是
    </div>
    <div class="switch">展开</div>
    </div>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script language="javascript">
    var cur_status = "less";
    $.extend({
    show_more_init:function(){
    //alert("show_more_init!");
    var charNumbers=$(".content").html().length;//总字数
    var limit=50;//显示字数
    if(charNumbers>limit){
    var orgText=$(".content").html();//原始文本
    var orgHeight=$(".content").height();//原始高度
    var showText=orgText.substring(0,limit);//最终显示的文本
    $(".content").html(showText);
    var contentHeight=$(".content").height();//截取内容后的高度
    $(".switch").click(
    function(){
    if(cur_status == "less"){
    $(".content").height(contentHeight).html(orgText).animate({ height:orgHeight}, { duration: "slow" });
    $(this).html("收缩");
    cur_status = "more";
    }else{
    $(".content").height(orgHeight).html(showText).animate({ height:contentHeight}, { duration: "fast" });
    $(this).html("展开");
    cur_status = "less";
    }
    });
    }else{
    $(".switch").hide();
    }
    }
    });
    $(document).ready(function(){
    $.show_more_init();
    });
    </script>
    </body>
    </html>

  • 相关阅读:
    Java实现 LeetCode 524 通过删除字母匹配到字典里最长单词(又是一道语文题)
    dmalloc arm-linux平台使用
    dmalloc在嵌入式的开发板上的应用
    利用linux的mtrace命令定位内存泄露(Memory Leak)
    Linux C 编程内存泄露检测工具(一):mtrace
    Ubuntu10.04下安装Qt4和创建第一个Qt程序
    UBuntu14.04下安装和卸载Qt5.3.1
    MinGW 与MSVC的区别
    Qt5 编译 & 打包依赖dll发布
    查看gcc/g++默认include路径
  • 原文地址:https://www.cnblogs.com/520BigBear/p/7867183.html
Copyright © 2011-2022 走看看