HTML使用DIV+css实现展开全文的功能

手机app展示图文内容太长，导致底部评论等功能需要下拉到最底部才能看到，影响用户使用，所以用webview加载html页面，实现了展开全文的功能。直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图文展开</title>
<style>
#myarticle{
width:700px;
height:300px;
overflow-y:hidden;
border:1px solid green;
margin:20px auto;
}
p{
text-indent: 2em;
margin-bottom: 10px;
}
button{
width:700px;
margin:10px auto;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div id="myarticle">
<p>横道河子镇是牡丹江  通往哈尔滨  的咽喉要道，301国道  和缤绥铁路穿越全境，距省会哈尔滨253公里，距牡丹江市45公里，距绥芬河口岸  210公里，距海林市33公里，距国际航空港牡丹江机场  54公里，交通十分发达。横道河子镇行政区总面积为794平方公里，城镇规划  区面积为7.85平方公里。镇内有2个社区，辖6个行政村，总人口32000人。该镇有着悠久的历史与文化脉络，由于1897年中东铁路  的修建而使其得以发展，自沙俄  经营中东铁路至日伪时期，当年商贾云集，高楼林立，有“花园城镇”之称，由于独特的俄罗斯文化资源优势，使横道河子在俄罗斯和国内都享有一定的知名度。全省唯一的木制东正教堂  ，中东铁路机车库、大白楼都完整的保留至今，并有近200处俄式建筑留存下来，其中市级保护建筑104栋，国家级保护建筑5处。新建的中东铁路运输博物馆、油画村、剧照馆、王洛宾纪念馆、中共海林党史纪念馆等展馆也极大地丰富了横道河镇的旅游资源，如今横道河子俄罗斯小镇风景区已经获批国家AAAA级景区。。</p>
<p>东正教堂、机车库、木格楞、俄式民宅，俄式办公楼，小镇依山就势错落有致的建筑，完全是俄罗斯乡间别墅的布局，最为珍贵的是，横道河子的老建筑保护得非常好，几乎没被破坏。没有了战争，教堂的钟声也远去了，可这些俄式古屋却仍然显示着小镇异域风情的存在。现在横道河子小镇的人依然喜欢喝啤酒、果酒和烈性白酒，喜欢吃火腿肠、面包和果酱，人们的生活仍旧带有俄罗斯民族的习俗。择一城终老，横道河子古镇真的是一处可以安放灵魂的地方，宁静、祥和、缓慢。</p>
<p>东正教堂、机车库、木格楞、俄式民宅，俄式办公楼，小镇依山就势错落有致的建筑，完全是俄罗斯乡间别墅的布局，最为珍贵的是，横道河子的老建筑保护得非常好，几乎没被破坏。没有了战争，教堂的钟声也远去了，可这些俄式古屋却仍然显示着小镇异域风情的存在。现在横道河子小镇的人依然喜欢喝啤酒、果酒和烈性白酒，喜欢吃火腿肠、面包和果酱，人们的生活仍旧带有俄罗斯民族的习俗。择一城终老，横道河子古镇真的是一处可以安放灵魂的地方，宁静、祥和、缓慢</p>
<p>东正教堂、机车库、木格楞、俄式民宅，俄式办公楼，小镇依山就势错落有致的建筑，完全是俄罗斯乡间别墅的布局，最为珍贵的是，横道河子的老建筑保护得非常好，几乎没被破坏。没有了战争，教堂的钟声也远去了，可这些俄式古屋却仍然显示着小镇异域风情的存在。现在横道河子小镇的人依然喜欢喝啤酒、果酒和烈性白酒，喜欢吃火腿肠、面包和果酱，人们的生活仍旧带有俄罗斯民族的习俗。择一城终老，横道河子古镇真的是一处可以安放灵魂的地方，宁静、祥和、缓慢</p>
<p>非常感谢女儿和她同年同月同日生的小伙伴，是两个孩子的四只小手，牵起了两个家长的四只大手（八爪鱼有木有），携手在线为您忽悠，还要感谢携手在线的姑娘、小伙们，你们应该的呵！</p>
</div>
<button id="btn">展开全文……</button>
<script>
var btn = document.getElementById('btn');
var obj = document.getElementById('myarticle');var total_height =  obj.scrollHeight;//文章总高度var show_height = 300;//定义原始显示高度if(total_height>show_height){btn.style.display = 'block';btn.onclick = function(){obj.style.height = total_height + 'px';btn.style.display = 'none';}}
</script>
</body>
</html>

HTML使用DIV+css实现展开全文的功能相关推荐

html怎么实现展开,HTML使用DIV+css实现展开全文的功能
图文展开 #myarticle{ width:700px; height:300px; overflow-y:hidden; border:1px solid green; margin:20px a ...
[javascript] 实现展开全文和收起全文效果
在展示大量文本的时候,很多网站会在页面上出现一个展开全文的文字按钮 , 点击这个按钮才会展开全部内容 . 使用jquery比较容易实现 , 最开始我想直接根据vuejs的语法来实现效果 , 结果失败 ...
查看全文的css,如何通过纯CSS实现“点击展开全文”功能
看标题大家不难猜到我今天要实现的功能,正如你打开 HTML代码这是前端开发博客的正文点击展开全文将上述代码加入到 single.php 文件里面,按钮一般命名为"点击展开全文" ...
CSS如何动态下拉div盒子、移动div盒子和展开div盒子
前言:css是层叠样式表,是一种用于网页设计的语言,它可以为HTML和XML文档添加样式和布局.我们通过css可以控制文本的颜色.字体大小.字体间距等等.css是强大的工具,它可以使我们的网页更加的美 ...
html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字
DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景 ...
selenium+python抓取微博时遇到“展开全文”
抓取微博时遇到"展开全文"时,在网上搜的很多都是利用工具设置二级规则之类,尝试之后利用selenium+python直接模拟点击,抓取展开全文后的文本. 在此利用的是xpath定位 ...
vue 展开全文，收起全文
样式效果 1.展开全文 2.收起全文 html <div class="content_box"><div class="cont_top"& ...
计算机网页div怎么划分,《网页布局与实现（DIV+CSS）》
编辑推荐:<高职高专计算机教学改革新体系规划教材>特色: ·反映产业技术升级,符合职业教育规律和高端技能型人才成长规律,根据计算机类专业建设和教育教学改革而设计. ·对接职业标准和岗位要求 ...
使用Selenium实现微博爬虫：预登录、展开全文、翻页
一.区分动态爬虫和静态爬虫 1.静态网页静态网页是纯粹的HTML,没有后台数据库,不含程序,不可交互,体量较少,加载速度快.静态网页的爬取只需四个步骤:发送请求.获取相应内容.解析内容及保存数据. ...

HTML使用DIV+css实现展开全文的功能

HTML使用DIV+css实现展开全文的功能相关推荐

最新文章

热门文章