善恶资源网专注优秀技术教程分享网-傅汉松!

网站长文章渐隐效果和点击展开按钮制作方法

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是网站长文章渐隐效果和点击展开按钮制作方法

傅汉松

现在很多网站都有这样的效果,一篇文章文字比较多,刚开始并不会将所有内容都展现给浏览者,而是显示一部分内容,然后在底部有一个“展开按钮”,点击后,就可以展现所有内容。效果如下图:

下面介绍一下这种网站长文章渐隐效果和点击展开按钮制作方法。

方法/步骤

第一步:制作点击按钮;

<div class="LookMore">展开全部</div>

第二步:设置按钮样式;

.LookMore{width:140px;margin:20px auto;height:34px;line-height:32px;
text-align:center;border-radius:15px;border: 1px solid #c7d1d6;
background-color: #eee;color: #4dba50;}

第三步:制作渐隐效果,原理就是放一个遮罩层,然后设置遮罩层的透明度。

<div class="gradient"></div>

第四步:设置遮罩层的样式;

.gradient{background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),to(#fff));
background-image: -webkit-linear-gradient(top,rgba(255,255,255,0),#fff);
background-image: linear-gradient(-180deg,rgba(255,255,255,0),#fff);
height: 140px;position: absolute;left: 0;bottom: 0;width: 100%;}

第五步:通过JS设置点击后展开全部内容的效果;

<script>
$(".LookMore").click(function() {
$(".xwz-con-buzou").css("height","auto");
$(".LookMore,.gradient").css("display","none");
});
</script>

通过上面的几步,就可以在自己做网站时,将息网站上的长文章制作一个点击展开的按钮了。

标签: 暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:321976193@qq.com

同类推荐
评论列表

技术教程 网站长文章渐隐效果和点击展开按钮制作方法
现在很多网站都有这样的效果,一篇文章文字比较多,刚开始并不会将所有内容都展现给浏览者,而是显示一部分内容,然后在底部有一个“展开按钮”,点击后,就可以展现所有内...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    89.93ms