jQuery实现仿移动端[查看更多]文章效果

效果展示:

源码展示:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>多行文本溢出省略</title>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        #goodIntroduction{
            cursor: pointer;
        }
        #target{
            width: 500px;
            height: 20px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="goodIntroduction">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam error eveniet exercitationem
        pariatur quos suscipit? A accusantium amet architecto, dicta eaque fuga laudantium nulla quisquam rem rerum
        similique, sunt?
    </div>
    <div>A autem corporis deleniti dicta dignissimos dolores ea eius eligendi, est ipsa laudantium magnam molestiae
        molestias odio porro quo recusandae repudiandae saepe sed sint tempora totam vel vitae voluptate, voluptatibus?
    </div>
    <div>Amet consequuntur deserunt doloribus hic nam nesciunt nihil recusandae saepe voluptatem? Delectus deserunt
        dolorem eaque, fuga iure magni pariatur porro tenetur? Accusantium debitis enim incidunt laboriosam magnam
        necessitatibus voluptate voluptatibus!
    </div>
    <div>Consectetur distinctio, doloremque laboriosam nam necessitatibus velit. Dolorum ea optio quasi tempore ullam
        voluptas. Architecto expedita facere maiores perferendis quidem reprehenderit. Ducimus ea enim est illo neque
        officia sequi soluta.
    </div>
    <div>Alias corporis cupiditate dolorem eligendi, est exercitationem, explicabo laboriosam laudantium magnam minima
        natus pariatur perferendis quia quos tempore, tenetur ullam. Ab autem dignissimos impedit minima provident quasi
        ratione tenetur, vitae.
    </div>
</div>
 
<div id="target">
 
</div>
 
<script>
    var str = $("#goodIntroduction").text();
    var tempt = str;
    coverup();
 
    function coverup() {
        if (str.length > 120) {
            $("#goodIntroduction").text(tempt.slice(0, 120) + "...");
        }
        var readmore = "<a onclick='showmore()'  style='color: orange;'>查看更多↓</a>"
        $("#goodIntroduction").append(readmore);
    }
 
    function showmore() {
        $("#goodIntroduction").text(str);
        var readmore = "<a onclick='coverup()'  style='color: orange;'>收起↑</a>"
        $("#goodIntroduction").append(readmore);
    }
</script>
 
</body>
</html>

与御风痕博客园,程序员博客园地的首选!
御风痕博客园 » jQuery实现仿移动端[查看更多]文章效果

发表评论