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');
//获取p
var 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 = str
btn.innerHTML = '<<<收缩';
}
onOff = !onOff; //每点击一次,改变一次展开、收缩状态
return false; //阻止a标签的默认事件
}
</script>
</body>
</html>