html页面内容的收缩和展开效果

常见的网页中，会见到收缩和展开的效果。比如经常浏览网页里的新闻内容就会经常看到这种效果，新闻的内容只显示少数的一部分，然后后面会跟一个展开的链接，点击这个链接才会显示全部的新闻内容。

1、收缩情况下显示内容效果

2、点开之后显示的内容效果

3、实现的代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>h3 {text-align: center;}#content {text-indent: 2em;}</style>
</head><body><h3>从零开发一个淘宝客公众号【嗨皮搜券】</h3><span id="content">春节在家期间研究了一下淘宝客开放平台，并写了一个公众号【嗨皮搜券】，功能是可以查询淘宝和天猫内部优惠券，并生成淘口令，别人用我的淘口令下单就可以赚取佣金啦。其实50%的淘宝商家会设置一些内部优惠券，90%的商家会设置一些返利给推广人员帮忙推销商品，阿里妈妈美其名曰-粉丝福利购。利用这个套路做的比较成功的有返利网、花生日记等。看一下效果，发送宝贝标题即可搜索内部推广优惠券信息。 点击查看具体的搜券教程：https://mp.weixin.qq.com/s/yheG6E04GHE0Hjopt4KzOg。关注【嗨皮搜券】回复<客服>添加我微信，一起学习成长吧！用到哪些技术栈和服务？
1、Node.js(基于Koa搭建后台程序)
2、花生壳（内网穿透，本地开发调试）
3、nginx（由于花生壳的域名被微信屏蔽，使用nginx反代理，配合花生壳本地调试使用）
4、阿里云服务器（上线时使用，如果用自己的电脑的话可以不用买服务器）
5、TOP（淘宝开放平台API）
6、微信公众平台（开发文档）
7、Logo和图片在线设计（凡科快图）</span><a href="javascript:;" id="btn"><<<收缩</a><script type="text/javascript">//获取button按钮var btn = document.getElementById('btn');//获取pvar content = document.getElementById('content');//获取p中的内容var str = content.innerHTML;//定义一个变量，表示当前的状态（收缩、展开）var onOff = true; // true表示展开btn.onclick = function() {if (onOff) {content.innerHTML = str.substr(0, 50) + "......";btn.innerHTML = '>>>展开'} else {//说明当前状态是收缩的，需要展开content.innerHTML = strbtn.innerHTML = '<<<收缩';}onOff = !onOff; //每点击一次，改变一次展开、收缩状态return false; //阻止a标签的默认事件}</script>
</body></html>

html页面内容的收缩和展开效果相关推荐

Android导航栏高斯模糊,iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果...
(1)如果是使用系统导航栏则设置其translucent属性即可: [self.navigationController.navigationBar setBackgroundImage:[UIIma ...
html+css+js实现内容的收缩与展开
1.说明:设置指定高度,当内容超过事先设置的高度时,便会出现"查看更多"按钮,单击"查看更多"超出内容变回展开同时"查看更多"切换成&quo ...
bootstrap页面缩小导航收缩和展开
导航使用ulli标签时,当页面缩小时,菜单收缩 <div class="navbar navbar-default" role="navigation"& ...
京东css3动画全屏海报_CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列表块的收缩和展开动画效果,几乎都是使用 display 的 none 和 block,或者 visibility 的 hi ...
php展开收缩bom表_WordPress实现文章内容收缩和展开功能
我们经常在浏览有些网站的时候看到内容只展示部分内容,如果需要阅读全文的话需要点击内容按钮才可以展现全部内容.这样的好处就是不至于一次将文字页面全部打开,使得页面不至于一次加载太长.这个功能到底如何实现 ...
html5点击展开动画效果,jquery展开收缩扑克牌动画效果教程
Baraja是一个很有趣的jQuery插件.它允许你像在桌子上摊开扑克牌一样将元素展开和收缩.它使用CSS transforms来旋转和translate这些元素.它使用几个可用参数来控制各种不同的展 ...
android自定义伸缩框（展开效果）
</pre>在android中往往在很多时候用到伸缩框也就是展开效果,或者说是折叠效果,当然在Android中系统也有个类似QQ好友的方式的View "ExpandableLis ...
div上下展开收缩 html,js实现div层缓慢收缩与展开的方法
本文实例讲述了js实现div层缓慢收缩与展开的方法.分享给大家供大家参考.具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错.不受内容约束,收 ...
左侧菜单栏左滑收起展开效果
上一篇文章左侧菜单栏折叠展开效果-超级简单介绍了将菜单列表上下展开的效果,这里在上一篇文章的基础上增加了左右折叠展开,有时候左侧菜单可能占了屏幕的一部分宽度,我们想把左侧菜单栏收缩起来以此让右边可视 ...
纯前端实现 App Store 卡片展开效果
↓推荐关注↓ 今集我们会模仿 App Store 这个卡片展开效果: 本来想只用 HTML 和 CSS 去制作,但最后都要运用到 JavaScript,那我们立即开始吧. HTML 的部分打开 Co ...

html页面内容的收缩和展开效果

html页面内容的收缩和展开效果

html页面内容的收缩和展开效果相关推荐

最新文章

热门文章