点击更多显示更多内容

最新推荐文章于 2022-08-08 14:13:13 发布

weixin_30291791

最新推荐文章于 2022-08-08 14:13:13 发布

阅读量2k

点赞数

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/zhaorongzhang/p/6005554.html

版权

今天在做项目的时候遇到页面中加载的文章过多,如果全部都显示出来的话会影响页面的美观,所以写了一个点击加载更多的按钮,让文章的内容只显示其中的一部分,如果读者想看更多的内容可以点击更多这个按钮观看更多的内容!

因为我写的页面中有相对定位和绝对定位,所以在demo页面中也是用的相对定位和绝对定位写的:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box" style="background:#ccc;width:500px;margin:5px;line-height:20px;overflow:hidden;position:relative">
    
        <div class="nei" style="position:absolute;width:100%">
             每读李白、杜甫、王维的诗，眼前就会浮现出一幅幅山村水廓、竹篱茅舍的秀美画卷，每看石涛、朱耷，大千的画，心中又会默念起一首首吟梅咏菊、托物抒怀的隽永诗篇；所谓诗中有画，画中有诗，彼此是可以互动与转换的，都是文化瑰宝、智慧的结晶，我不想在这里谈诗论画，那文学艺术的东西，要留给行家们去探讨，唯有他们才梳理得清，这里要说的不是纸上山水，也不是庭中花卉，而是走进大自然时的真切感受和亲身经历。那里的巉崖峭壁，终年云遮雾障，那里的飞瀑流泉，四季枯涨有时；它们形成于开天辟地之时，昂首在风蚀雨淋之中。每当我攀越而上或穿行于林中，冷不防会掠过一溜烟四脚后影，会惊起一串铃清脆乐音；那都是自然的骄子、山国的臣民。大山就有这样的神奇，一旦到达顶峰，即使我不会写诗，也总想把白云当稿纸任意涂写，让激情释放；即使我不会唱歌，也敢对着蓝天大喊一声，让山鸣谷应。

　　        在山野之中，无论是有生命还是无生命，无论是活动还是静止的，其实都是一种符号，在为我们揭示出大自然的秘密，可惜大多数人都还不认识那种符号，没把天地万物当作大书来读，始终看山还是山，看水还是水，无法上升到一种新的高度。过去我也是这样，看到大海，不过是那么多水，看到美女，不过是一张嘴巴两条腿；要是谁跟我侈谈什么高雅艺术，我就会避难就易，避重就轻，有时干脆就闭嘴，要不然，就会言不及义，出尽洋相。后来我经过深刻反省：认识到一个人虽然天赋重要，但起决定性作用的还应是后天，只要肯下功夫，通过不懈努力，岂能一成不变？于是便下定决心，从头开始，只要敢冲破那道自筑的围墙，打掉自卑感，只要站得高，就会看得远！于是我便夙兴夜寐，孜孜以求，频频走进大自然，去阅读高山大嶂，辨识流岚轻烟，并且由表及里、由浅入深，渐渐就品出了滋味，尝到了甜头，然后一步步登堂上殿，不再坐井观天。说起来这种阅读方法，也简单得很，既不用焚香沐浴，也无须斋戒净身；可在崇山峻岭，也可在涧旁野径；只要放下得失，心无挂碍，一草一木，就能变成文字，一沙一石，也会化作语言。读罢高岭又读深谷，通篇都是生机勃勃、诗意盎然，真不愧是大自然的杰作，最精彩部份，便是天地大美。
        </div>

    </div>
    <a href="javascript:void(0)" class="showa">展开</a>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var oHeight = $('.nei').height();//获取里面div的高度
        oldHeight=oHeight;//把里面div的高度赋值给外面的div
        var newHeight = $("#box").css({height:"100px"});//这个是加载后给外面div设置的一个高度(显示内容的区域)
        if(oHeight<100){//如果里面div的高度小于100的话也就是说内容不多的时候把更多按钮隐藏
            $('.showa').css('display','none')
        }
        $(".showa").click(function(){
        if(parseInt($("#box").height())==oldHeight){
        $("#box").animate({height:"100px"});
        $(this).html("展开");
        }else{
        $("#box").animate({height:oldHeight});
        $(this).html("收起");
        }
        });
    });
</script>
</body>
</html>

有什么错误的地方希望看到的朋友给提示一下,可以共同进步!

转载于:https://www.cnblogs.com/zhaorongzhang/p/6005554.html

weixin_30291791

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
点击更多显示更多内容

今天在做项目的时候遇到页面中加载的文章过多,如果全部都显示出来的话会影响页面的美观,所以写了一个点击加载更多的按钮,让文章的内容只显示其中的一部分,如果读者想看更多的内容可以点击更多这个按钮观看更多的内容!因为我写的页面中有相对定位和绝对定位,所以在demo页面中也是用的相对定位和绝对定位写的:<!DOCTYPE html><html lang="en">...
复制链接

扫一扫