DIV+css内容太长,实现点击展开余下全文

DIV+css内容太长,实现点击展开余下全文

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>文章高度展开</title>
  6. <style>
  7. .content{
  8.     padding:10px 12px 48px;
  9.     font-size:18px;
  10.     color:#2b2b2b;
  11.     line-height:1.7em;
  12.     height:300px;        /*初始要显示的高度*/
  13.     overflow:hidden;    /*关键样式:内容会被修剪,并且其余内容是不可见的。*/
  14.     position:relative
  15. }
  16. .content div{            /*获取更多内容图标div*/
  17.     clear:both;
  18.     min-height:1em;
  19.     white-space:pre-wrap; /*如何处理元素内的空白*/
  20. }
  21. .get_ct_more {
  22.     height:78px;
  23.     position:absolute;
  24.     bottom:0px;width:100%;
  25.     background:linear-gradient(to top,#fff,rgba(255,255,255,070%);
  26.     margin:0px;
  27.     margin-right:10px
  28. }
  29. .more_bt {
  30.     width:16px;
  31.     height:16px;
  32.     margin-left:36%;
  33.     margin-bottom:-10px
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div id="content" class="content">
  39. <p>98日,吴小姐一家和朋友去西溪印象城吃饭,找了个吃火锅的餐馆坐下桌子靠着木制隔断墙,
  40. 吴小姐将11个月大的孩子放在最里面的位置,心想靠着隔断墙,这样安全点</p>
  41. <p>吴小姐先把孩子喂饱,然后随他自己在位子上玩快吃完时,吴小姐突然发现孩子嘴边有淡黄色粉末状物体,还在砸吧着嘴巴</p>
  42. <p>品尝味道
  43. 我没给他喂过这东西啊吴小姐大脑立马一阵搜索,看孩子手上也有类似粉状,再放眼一看,餐桌侧边的隔断墙缝里,
  44. 有一小堆淡黄色粉末,像佐料像木屑
  45. 我一开始以为是木屑,后来才发现不是就算是那个时候,吴小姐也没想到这黄色粉末是杀蟑螂的药粉</p>
  46. <p>吴小姐叫来了服务员问:这是什么东西,我想知道我孩子吃了什么?
  47. 服务员警觉地啊了一声,接着让吴小姐稍等一下,他说要去问店长,他也不知道是什么东西
  48. 服务员的这一声啊,让吴小姐及朋友非常紧张</p>
  49. <p>孩子吃下去的黄色粉末是杀虫剂
  50. 当晚就进了抢救室
  51. 等不及店长的回复,吴小姐带着孩子赶到省儿童医院一到医院,孩子马上被送到抢救室</p>
  52. <p>医生问孩子吃了什么?
  53. 吴小姐说,不知道她拿出从现场取的一点粉末让医生看,但医生无法辨别,他说必须尽快知道这种东西的属性才能治疗
  54. 98日晚上9点多,吴小姐收到了店长发来的图片,称这是一种杀虫饵剂,用来防止蜚蠊蚂蚁,有效成分及含量是:乙酰甲胺磷/acephate 1.5%</p>
  55. <p>医生看了图片后说,孩子要洗胃
  56. 11个月大的孩子就要洗胃,吴小姐跟老公发生了争执:我老公觉得11个月大的孩子不应该承受这种痛苦,但对我来说,我是一个母亲,
  57. 如果我们不洗胃了,我不知道第二天会怎么样,我不敢冒这个险</p>
  58. <p>吴小姐说她虽然无法确切说出乙酰甲胺磷是什么,但是甲胺磷她还是听说过的:那是一种农药啊,有毒的啊
  59. 最后吴小姐坚持洗胃,四个大人一边哭一边按着孩子,配合医生给孩子洗胃</p>
  60. <p>现在三天过去了,所幸孩子目前没有出现其余症状,已出院回家</p>
  61. <div id="get_ct_more" class="get_ct_more">
  62.     <img src='more.png' class="more_bt" id="more_bt">
  63. </div>
  64. </div>
  65. <script>
  66. var btn = document.getElementById('get_ct_more');
  67. var obj = document.getElementById('content');
  68.     var total_height = obj.scrollHeight;//文章总高度
  69.     var show_height  = 300;//定义原始显示高度
  70.     if(total_height>show_height){
  71.         btn.style.display = 'block';
  72.         btn.onclick = function(){
  73.             obj.style.height = total_height + 'px';
  74.             btn.style.display = 'none';
  75.         }
  76.     }
  77.     var t1=window.setInterval(refreshCount, 500);        //动态按钮
  78.     var more_img = document.getElementById("more_bt");
  79.     var first_one = 0;
  80.     function refreshCount() {
  81.         if(first_one == 0){
  82.             more_img.style.marginBottom='-5px';
  83.             first_one=1;
  84.         }else{
  85.             more_img.style.marginBottom='-10px';
  86.             first_one=0;
  87.         }
  88.     }
  89. </script>
  90. </body>
  91. </html>
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有M币奖励和额外收入!

模板下载吧 快速入门 DIV+css内容太长,实现点击展开余下全文 https://www.mbxzb.com/blog/file/rumen/24266.html

从明天起,做一个幸福的人,喂马、劈柴、周游世界…

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

评论
暂无评论
点击按钮快速添加回复内容: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 威武 友军 顶贴
官方客服团队

为您解决烦忧 - 24小时在线 专业服务