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、这是我的示例,其中t筠续师诈rigger是鼠标滑过哪个元素的时候弹出当前的popup,可用class和id,node是相对于哪个元素的位置,p泠贾高框oints表示与元素哪里对齐,其中 t(上),c(中), b(下),l(left),r(右) ,offset基本用于微调, 在x,y坐标之间移动。
5、其中定位较难理解,补充个定位图。