关闭
关闭

淘宝拓展版新特效Popup弹出层

时间:2011-06-14 19:46 来源:未知 作者:地瓜 浏览: 1736

旺铺拓展版分为官网型、营销型、官网型和营销型。装修和店铺功能上,拓展版比标准版的功能要增加很多。最近淘宝又推出了新的特效——淘宝拓展版新的特效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内。不允许影响页头页尾。

  •   【优秀刷钻平台】淘宝免费刷钻点这里 兼职刷客日赚100点这里
    觉得本文有用?

    精彩评论

    评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)

    推荐阅读

    • 淘宝店铺装修在线制作

      很多新手朋友对ps并不是很懂,或者说一窍不通,那么想制作一些自己的店招,分类,店标等等怎么办呢?淘宝学堂装修...

    • 如何让店铺视觉直接提升销售额

      最近碰到很多的卖家都在纠结自己的店铺视觉,总感觉自己的店铺风格不是自己需要的,我发现很多店主还是在凭自己的...

    热点排行