淘宝装修widget框架渲染特效教程之POPUP弹出层

阅读:4462回复:6

作品版权由胡李斌解释,禁止匿名转载;禁止商业使用;禁止个人使用。 临摹作品,同人作品原型版权归原作者所有。

楼主#
更多 发布于:2016-02-21 13:58
淘宝装修widget框架渲染特效教程之POPUP弹出层(由浅入深)

有辣么多的淘宝设计师!淘宝装修不能实现一些特效是一个很头疼的问题。用网上的淘宝特效代码生成器,这确实是个好办法。但是,有的时候你会发现生成器生成的效果,跟你的设计稿有区别(主要是细节)。淘宝不让使用CSS样式 和 js,没办法实现一些特效,所以只能通过调用淘宝官方提供的JS框架来渲染。此教程可以尽可能地帮助淘宝设计师们做出自己想要的特效。

今天第一讲,讲的是“鼠标经过”特效。这个特效,淘宝设计师们一般管他叫“开关灯”或者”弹出层”,程序猿们管他叫“鼠标经过事件”。
大纲: 一、基本代码效果预览
二、代码深度解析
a) 原理解读
b) 属性配置解析
三、示例
a) 示例展示
b) 示例解析
基本代码和效果预览:
触发层:
<span class=”test”>鼠标移动到我上面,将会弹出一段文字</span>
弹出层:
<div class="J_TWidget hidden" data-widget-config="{'trigger':'.test','align':{'node':'.test','offset':[0,0],'points':['bc','tc']}}" data-widget-type="Popup">
<p>我就是弹出的文字</p>
</div>
效果:

代码深度解析:
步骤解析
首先,向淘宝调用JS框架,方式:<div class=“J_TWidgetdata-widget-type="Popup"> ... </div>
调用好之后,我们需要把他隐藏,方式:<div class=“J_TWidget hiddendata-widget-type="Popup"> ... </div>
接下来设置框架属性:
<div class=“J_TWidget hidden” data-widget-config="{'trigger':'.A1','align':{'node':'.A1','offset':[0,0],'points':['bc','tc']}}" data-widget-type="Popup">
...
</div>
属性解析:
data-widget-type="Popup"    指部件类型为(=)”弹出层“
‘trigger’:‘.类名’        指由谁触发,值为“.”+”触发层的class名”,值以小数点开头,第一个符号必须是字母(大小写任意),如: ‘trigger’:.A1
‘align’:{‘node’:’.A1’,’offset’:[0,0],’points’:[tc,bc’]}        为”对齐”进行参数配置
align配置解析:
‘node’:’.A1                该配置意为:这个弹出层与class名为A1的节点建立对齐关系;
offset’:[0,0]                 该配置意为:这个弹出层的位置坐标x轴为0,y轴为0;
‘points’:[tc,‘bc’]        该配置意为:这个弹出层的参考点为TC(top & center),BC(bottom & center)
参考点表示方法;T (top) ; B (bottom) ; L (left) ; R (right) ; C (center)

align配置解析得出的结论是:弹出层以顶部中心底部中心为中心参考线,显示在class为A1节点的 [0,0] 坐标上


示例1:

示例1代码
<div style=”width:940px;height:674px;background:#ffffff;padding:5px;”>
<div class=”image1”style=”height:674px;width:467px;background-image:url(http://初始图片地址1.jpg);float:left;”>
<div class="J_TWidget hidden"data-widget-config="{'trigger':'.image1','align':{'node':'.image1','offset':[0,-674],'points':['bc','tc']}}" data-widget-type="Popup" >
<img src=http://鼠标移上后要显示图片地址(半黑色)1.pngwidth=467 height=674>
</div>
</div>
<div class=”image2”style=”height:489px;width:467px;background-image:url(http://初始图片地址2.jpg);float:left;margin-left:5px;”>

<div class="J_TWidget hidden"data-widget-config="{'trigger':'.image2','align':{'node':'.image2','offset':[0,-489],'points':['bc','tc']}}" data-widget-type="Popup"  >
<img src=http://鼠标移上后要显示图片地址(半黑色)2.pngwidth=467 height=489>
</div>

</div>
</div>

注意:如果一个页面里有  两个或者多个弹出层, class=”“ 的值不能够与另一组弹出层重复(重复将出现弹出混乱),如上例子两组弹出层的红色字体部分。


实例应用:(亲测可用)

效果过程:
图中有两张产品的图片。
当鼠标移动到第1张图片上方之后,在第1张图片边会弹出第1个产品的价格、参数等详细信息,移开时详细信息消失。
当鼠标移动到第2张图片上方之后,在第2张图片边会弹出第2个产品的价格、参数等详细信息,移开时详细信息消失。

优点:此案例可以节省页面空间的同时,还可以查看到产品的详细信息。

缺点:当鼠标移动到第1张图之后,不能够直接移动到第2张图,必须先移开第一张图上方之后方可移动到第二张图上 查看信息;由于是使用调用插件的形式,当鼠标经过之后需要0.3秒左右的时间才能显示。

步骤解析:
第一步、需要4张图片,上传到图片空间(这个案例每张图片的尺寸为318px * 302px)
两张是产品图
产品图A.jpg
产品图B.jpg


两张信息图
信息图A.jpg
信息图B.jpg

第二步、代码的编写
1、制作一个大的盒子(宽度636px;高度302px;):
<div style="width:636px;height:302px;">
.......
</div>
2、在大盒子之间制作两个触发层(宽度318px;高度302px;):
<div style="width:636px;height:302px;">
<div style="width:318px;height:302px;float:left;" class="product_A">
<img src="产品图A">
....
</div>
<div style="width:318px;height:302px;float:left;" class="product_B">
<img src="产品图B">
....
</div>
</div>
3、在两个触发层内各加入弹出层(注意配置说明)
<div style="width:636px;height:302px;">

<div style="width:318px;height:302px;float:left;" class="product_A">
<a href=" #" target=”_blank” >
<img src="产品图A" width="318" height="302">
</a>
<div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{'trigger':'.product_A','align':{'node':'.product_B','offset':[0,-302],'points':['bc','tc']}}" ><!--配置说明:当鼠标经过触发者product_A的时候,他将会对齐显示在product_B之上-->
<img src="信息图A.jpg" width="318" height="302">

</div>
</div>

<div style="width:318px;height:302px;float:left;" class="product_B">
<a href=" #" target=”_blank” >
<img src="产品图B" width="318" height="302">
</a>
<div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{'trigger':'.product_B','align':{'node':'.product_A','offset':[0,-302],'points':['bc','tc']}}" ><!--配置说明:当鼠标经过触发者product_B的时候,他将会对齐显示在product_A之上-->
<img src="信息图B.jpg" width="318" height="302">
</div>
</div>

</div>




附加:淘宝店内评论模块(淘宝C店-旺铺专业版适用)

效果展示:


代码解析(加粗部分):

1、创建一个块级元素Div盒子

<div style="width:950px;">
......
</div>
2、调用淘宝提供的社交载体部件、
<div style="width:950px;">
<div class="sns-widget" >
</div>
</div>
3、配置数据
<div style="width:950px;">
<div class="sns-widget" data-comment='{"isAutoHeight":false,"param":{"target_key":"店铺ID号","type_id":"107","rec_user_id":"用户ID号","view":"detail_list","title":"欢迎评论","moreurl":"店铺URL地址" },"paramList":{"view":"list_trunPage"}}'>
</div>
</div>
属性配置说明:
第一项属性设置     isAutoHeight     是否自动高度:您可以选择true或者false
第二项属性设置     param   参数组:

1、属性名:target_key   属性值: 评论的目标,填写自己的店铺ID
2、属性名:rec_user_id  属性值:填写用户ID,填写自己的用户ID
3、属性名:moreurl     属性值:填写店铺首页地址(建议填写https://开头)


常见问题:
如何获取店铺ID?http://jingyan.baidu.com/article/6525d4b1523970ac7d2e942b.html
如何获取用户ID?
http://note.youdao.com/share/web/file.html?id=058049ed9c3c6e15a75e11680214946b&type=note




喜欢15 评分0
沙发#
发布于:2016-02-23 10:39
不错!!支持下!!
举报
回复(0) 喜欢(0)     评分

上海 青浦 青浦区

板凳#
发布于:2016-02-24 15:06
大神来了,555 ,终于可以看看淘宝组件这玩意了
举报
回复(0) 喜欢(0)     评分

广东 中山 中山市

地板#
发布于:2016-05-07 15:32
太好了
举报
回复(0) 喜欢(1)     评分

湖南 株洲 茶陵县

4楼#
发布于:2016-11-20 16:01
举报
回复(0) 喜欢(0)     评分

广东 茂名 电白县

5楼#
发布于:2016-11-22 08:58
收藏先
举报
回复(0) 喜欢(0)     评分

黑龙江 大庆 让胡路区

6楼#
发布于:2016-12-09 18:19
这是真大神。。。。。跪拜一下
举报
回复(0) 喜欢(0)     评分
游客

返回顶部