淘宝店铺鼠标经过放大

今天熟悉到了淘宝前端的鼠标经过放大特效，这个跟幻灯片的使用原理差不多。我在这里把这段代码分析一下

<div class="sub all_t1"
style="width:160px;height:107px;background:url(http://img02.taobaocdn.com/imgextra/i2/845309971/T2khnoXihaXXXXXXXX_!!845309971.png_160x160.jpg) no-repeat;">
<div data-widget-config="{'trigger':'.all_t1','align':{'node':'.all_t1','offset':[0,-160],'points':['bc','tc']}}" data-widget-type="Popup" class="J_TWidget hidden">
<div style="width:310px;height:207px;background:url(http://img02.taobaocdn.com/imgextra/i2/845309971/T2khnoXihaXXXXXXXX_!!845309971.png_310x310.jpg) no-repeat"></div>
</div>
</div>

class="J_TWidget hidden" 是淘宝内置的js代码控制图片属性的关键，通过它来获取该div的节点，以及对节点的控制。至于style则是对样式的定义，包括长宽，背景图片

<div data-widget-config="{'trigger':'.all_t1','align':{'node':'.all_t1','offset':[0,-160],'points':['bc','tc']}}" data-widget-type="Popup" class="J_TWidget hidden"> 毫无疑问是特效的属性的定义，

node: ‘自定义’, // 参考元素。 popup与参考元素进行定位。和触点写法一样，

支持class和id选择器的写法
points: [tr,tl],  // ['tl', 'tr']表示popup的tl 与参考节点的 tr 对齐 ，
具体tl，tr表示的意义和值看下面截图,
t(top)，c(center), b(bottom),l(left),r(right)
offset: [0,0]     // 有效值为 [n, m] ， points对齐后，offset值，
一般可用于微调, n和m分别表示对齐两个点
在x,y坐标之间的偏移量

淘宝店铺鼠标经过放大相关推荐

《淘宝店铺经营管理一册通》一一1.3　页面中的图片应用
本节书摘来自异步社区出版社<淘宝店铺经营管理一册通>一书中的第1章,第1.3节,作者: 葛存山,更多章节内容可以访问云栖社区"异步社区"公众号查看. 1.3 页面中的图 ...
taobao.trades.sold.get-查询卖家已卖出的交易数据（根据创建时间),淘宝店铺卖出订单查询API接口，R2接口，oAuth2.0交易接口代码分享
一.taobao.trades.sold.get-查询卖家已卖出的交易数据(根据创建时间),淘宝店铺卖出订单查询API接口,R2接口,oAuth2.0交易接口代码分享搜索当前会话用户作为卖家已卖出的 ...
taobao.trades.sold.get-查询卖家已卖出的交易数据（根据创建时间),淘宝店铺卖出订单查询API接口，淘宝R2接口，淘宝oAuth2.0交易接口代码分享
一.taobao.trades.sold.get-查询卖家已卖出的交易数据(根据创建时间),淘宝店铺卖出订单查询API接口,R2接口,oAuth2.0交易接口代码分享搜索当前会话用户作为卖家已卖出的 ...
《淘宝店铺营销推广一册通》一2.3　热门赚钱行业网店成功秘诀
本节书摘来异步社区<淘宝店铺营销推广一册通>一书中的第2章,作者: 葛存山责编: 赵轩, 更多章节内容可以访问云栖社区"异步社区"公众号查看. 2.3 热门赚钱行业网 ...
做淘宝怎样去免费推广自己的淘宝店铺
<wbr></wbr> 我的文采不好,请大家不要见笑.反正通俗易懂,不知道各位!我是看不懂某些专家呀大师呀.说的很专业.咱新手看不懂,所以总结了一下推广店铺.推广商品的办法: ...
淘宝店铺优化中影响商品排名的几个必看因素
淘宝店铺优化中影响商品排名的几个必看因素影响商品搜索权重的因素有很多,除了之前讲到的最基本的5大相关性之外,还有很多细节方面的因素,如是否加入橱窗推荐.是否参加了消保.是否添加了淘宝标签等.这些因素 ...
《淘宝店铺经营管理一册通》一一1.7 淘宝店铺经营管理一册通
本节书摘来自异步社区出版社<淘宝店铺经营管理一册通>一书中的第1章,第1.7节,作者: 葛存山,更多章节内容可以访问云栖社区"异步社区"公众号查看. 1.7 淘宝店铺经 ...
《淘宝店铺营销推广一册通》一1.4　优化宝贝描述，让成交飞
本节书摘来异步社区<淘宝店铺营销推广一册通>一书中的第1章,作者: 葛存山责编: 赵轩, 更多章节内容可以访问云栖社区"异步社区"公众号查看. 1.4 优化宝贝描述, ...
《淘宝店铺经营管理一册通》一一1.2　优化宝贝描述，让成交量飞涨
本节书摘来自异步社区出版社<淘宝店铺经营管理一册通>一书中的第1章,第1.2节,作者: 葛存山,更多章节内容可以访问云栖社区"异步社区"公众号查看. 1.2 优化宝贝描 ...

淘宝店铺鼠标经过放大

淘宝店铺鼠标经过放大相关推荐

最新文章

热门文章