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>

  • 相关阅读:
    【20171227】json
    【20171224】文件操作
    【20171225】编解码
    【20171226】urllib
    【20171226】requests
    【错误集】编解码
    Python 基础概念——单例设计模式
    Python 继承
    python面向对象概述
    Python基础_函数的递归
  • 原文地址:https://www.cnblogs.com/520BigBear/p/7867183.html
Copyright © 2011-2022 走看看