怎么实现阿里巴巴上鼠标经过图片自动展开显示全当前图片，这种效果我们通常叫CSS3手风琴特效模块，那在1688店铺上怎么去实现这种动态效果的切换呢？疯狂的美工小编在这来一篇图文带大家了解一下。功能使用非常简单，做好图填写图片地址链接地址安装到阿里巴巴店铺中即可啦！

阿里手风琴特效代码工具地址：https://www.fkdmg.com/gongju/2521.html

首先，我们准备好图片，图片尺寸单张尺寸虽然不限制，但也不宜过宽，太宽了图又多将无法正常展示在电脑屏幕内，太宽会导致看不全看不到的情况等！

那么多大尺寸合适呢？我们可以参考一下预置图的尺寸：

工具里预置的尺寸是：968x380，那么你在设计图片尺寸时可以参考这个你可以做1000宽的或800宽的，总之不要太宽，控制在1000px宽以内，1920宽的话是不行的，会导致显示不全到时候，因为太宽了屏幕没有位置来切换这个手风琴，高度的话不限制，当然也不要太高，太高不好看了。

要多少组往下添加一组就可以了，一般控制在3-6组，图片宽控制在1000以内显示更完美哦~写好链接地址 图片地址 预览没有问题生成代码装店铺即可使用啦！

从预览页面中的图片我们可以看到 在设计图片时要像预置的图片这样 主要内容及文字设计在左边。这样当鼠标经过展开时才能看到内容，右边的以背景形式延伸过去设计即可！

预览没有问题就是生成代码装店铺了，具体参考以下几个步骤即可啦！

最后打开阿里巴巴装修后台，先添加952宽的自定义内容区。如果没有现成的先去布局管理里添加952宽的布局 再添加自定义即可啦！

点开布局管理后，然后点击左侧的添加布局按钮，如下图

比如用我们工具生成的代码一般都是安装到952宽的通栏自定义内容区，安装侧边192栏除外，那么我们就添加个952宽的通栏布局即可哦~

添加完952宽的通栏布局之后就是添加版块了，点击添加版块再添加自定义内容区即可

这样添加的自定义内容区就是952宽的自定义内容区了，然后工具里生成的代码就是装在这个位置哦~

工具里复制代码到店铺要先点源代码模式，再粘贴代码 粘贴完直接点确定 不要点其他任何操作了

这样就轻松把这个手风琴模块装到阿里巴巴店铺上了，教程非常简单，不太会的多看几遍跟着操作就会了哦！亲们快去试试吧~