竹子建站
自助建站小技巧:​图片点击放大效果的实际应用!
2021-03-26 14:00:56
在网站建设的过程中,我们经常会用到很多图片进行内容的展示。一旦图片涉及到照片甚至是企业证书展示时,我们就会想要在网页中放置大量的图片内容。
这种情况下当图片太多,我们就不得不把图片缩小放置在网页里面,但是缩小以后的图片容易看不清楚详细内容,特别是像证书一类的内容就更加看不清了。
所以我们的图文组件中有一个叫做“lightbox”的效果,打开以后网页中的图片点击以后就会放大出来展示给访客,我们可以如下图所示进行设置:

将“lightbox”效果打开以后,我们还可以给图文组件加一个简单的代码效果,来引导访客点击图片,具体操作如下:

1、添加一个代码组件,将下列代码复制进去并保存:

<style>

    ._156uptb1kg02v{

  }

  .wei-loupe .zz-comp-list__item .img {

    position: relative;

    cursor: pointer;

  }

  .wei-loupe .zz-comp-list__item .img:after {

    content: '';

    width: 35px;

    height: 35px;

    background-color: rgba(0,0,0,.3);

    position: absolute;

    bottom: 0;

    right: 0;

    background: rgba(0,0,0,.3) url(https://f.cdn-static.cn/12954_16085423790635.png?imageView2/2/w/1800/q/75) center no-repeat;

    background-size: 85%;

    pointer-events: none;

  }

</style>

2、点击图文组件-设置-代码-自定义class,将wei-loupe复制进去并保存

最后的实际展示效果如下:

好啦,今天的教程就到这里了,大家赶快去试试吧,我们下期再见吧!