零基础学做网站培训介绍

当前位置:

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

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

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

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

方法/步骤

第一步:制作点击按钮;


<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>

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

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 请注意,这里说的文章分页,不是学做网站论坛以前说的wordpress分页插件进行网站分类目录分页,而是一篇文章如果文字过多,会造成网页篇幅过长,影响
  • 如果一篇长文章的文字和图片都在一个页面显示,加载起来会很慢,于是想分成几个页面,我用的插件是Pagebar这个wordpress必备插件!网上很多都是关
  • 对于分页,大多情况下我们在用在列表页面的,当一个列表分类下的文章数量过多的时候,我们需要通过wordpress分页插件来实现让用户在多个页面来查看。
  • 现在很多网站都有这样的效果,一篇文章文字比较多,刚开始并不会将所有内容都展现给浏览者,而是显示一部分内容,然后在底部有一个“展开按钮”,点击后
  • 一个客户需要开发这样的网站,左侧菜单是一个点击展开式菜单,默认是收缩的,点击后会展开带下拉子菜单的网站导航。当用户点击某个子菜单时,当前点击