淘宝店面电脑鼠标历经变大实际效果跟幻灯片的

日期:2020-12-11 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

今日熟习到了淘宝前端开发的电脑鼠标历经变大殊效,这个跟幻灯片的应用基本原理类似。我在这里把这段编码剖析1下

拷贝编码
编码以下:

<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,⑴60],'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,⑴60],'points':['bc','tc']}}" data-widget-type="Popup" class="J_TWidget hidden"> 没什么疑惑是殊效的特性的界定,

node: ‘自定’, // 参照元素。 popup与参照元素开展精准定位。和触点写法1样,

适用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值,

1般能用于微调, n和m各自表明对齐两个点

在x,y座标之间的偏位量