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>

  • 相关阅读:
    需求分析模板
    【转】卓有成效的敏捷开发流程
    敏捷建模者的个性
    四个凡事:有章可循,有人负责,有据可查,有人监督
    全局变量初始化的重要性
    Windows下虚拟串口工具:com0com可做串口调试用
    【转】各种加解密算法比较
    WSASocket函数未定义和重定义错误
    海明校验码
    stl学习总结
  • 原文地址:https://www.cnblogs.com/520BigBear/p/7867183.html
Copyright © 2011-2022 走看看