旺铺拓展版分为官网型、营销型、官网型和营销型。装修和店铺功能上,拓展版比标准版的功能要增加很多。最近淘宝又推出了新的特效——淘宝拓展版新的特效Popup弹出层。淘宝弹出这个效果一经推出就被广泛运用了,它的效果既实用又简单,效果如图。
DOM结构就是Html代码结构如下:
<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':['cc','cc']}
}">
<div style="background-color: blue; height: 100px; width: 100px;">这里是弹出层</div>
</div></div>
CSS代码:
.hidden{
display:none;
}
.first-trigger,.first-trigger1{
width:200px;
height:200px;
border:solid 1px red;
margin:10px;
}
如果想要更详细的参数设置,可以在data-widget-config设置参数,参数的示意如下:
触点与弹出层的对齐方式(align中的points配置) 元素及参考元素上各自的九个不同位置点('tl', 'tc', 'tr', 'cl', 'cc', 'cr', 'bl', 'bc', 'br') 。
注意:触点目前只允许包含在#content内。不允许影响页头页尾。
乐发网超市批发网提供超市货源信息,超市采购进货渠道。超市进货网提供成都食品批发,日用百货批发信息、微信淘宝网店超市采购信息和超市加盟信息.打造国内超市采购商与批发市场供应厂商搭建网上批发市场平台,是全国批发市场行业中电子商务权威性网站。
本文来源: 淘宝拓展版新特效Popup弹出层