淘宝店铺装修之弹出层

 时间:2024-10-12 13:23:59

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制作【新品上市】促销海报艺术字
  • 热门搜索
    牙痛怎么快速止痛药 头皮痒有小疙瘩怎么办 内分泌紊乱怎么调理 红色警戒怎么联机 张国荣怎么走的 西安电子科技大学怎么样 鸡爪怎么烧简单又好吃 痘印怎么去 久盛地板怎么样 怎么能怀孕