淘宝店铺装修之弹出层

 时间:2026-04-23 14:16:29

1、首先,准备好素材图片用来做弹出层和鼠标移入层。

淘宝店铺装修之弹出层

2、进入淘宝后台,新建一个自定义内容区,并点击进入代码模式。到此,准备的工作全部完成,下面进入代码编写模式。

淘宝店铺装修之弹出层

3、如果你有代码基础很好,如果没有也没关系,copy就OK了,弹出层需要应用淘宝的widget规范,具体代码为:<div class="first-trigger"></div><div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{'trigger':'.first-trigger','align':{'node':'.first-trigger', 'offset':[0,0],'points':['cr','cc']}}"><div style="background-color: yellow; height: 100px; width: 100px;"></div></div>(这里方便复制,看图熟悉用法)

淘宝店铺装修之弹出层

4、这是我的示例,其中trigger是鼠标滑过哪个元素的时候弹出当前的popup,可用class和id,node是相对于哪个元素的位置,points表示与元素哪里对齐,其中 t(上),c(中), b(下),l(left),r(右)  ,offset基本用于微调, 在x,y坐标之间移动。

淘宝店铺装修之弹出层

5、其中定位较难理解,补充个定位图。

淘宝店铺装修之弹出层

  • AxureRP如何设置字号
  • 简简单单做白果方法
  • PS图片没保存就被删了怎么恢复?
  • 字体设计方法,你会了吗?
  • illustrator制作【新品上市】促销海报艺术字
  • 热门搜索
    蚂蜂窝旅游攻略网 烟台旅游政务网官网 去韩国旅游注意事项 重庆贝迪颐园温泉旅游度假酒店 冬季黄山旅游攻略 三亚旅游景点介绍 国家5a旅游景区名单 五一去哪旅游好 河南省旅游景点大全 防城港金滩旅游攻略