淘宝widget之弹出层(Popup)的巧用.doc_第1页
淘宝widget之弹出层(Popup)的巧用.doc_第2页
淘宝widget之弹出层(Popup)的巧用.doc_第3页
淘宝widget之弹出层(Popup)的巧用.doc_第4页
淘宝widget之弹出层(Popup)的巧用.doc_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

淘宝店铺设计Widget之弹出层的巧用自从淘宝出推出了旺铺2012之后，我们淘宝卖家在装修店铺的时候更加能随心所以的设计自己的店铺了，愿意就是我们能使用多个自定义内容区了。但是，由于淘宝的限制，CSS权限依旧不对专业版的用户开放，所以我们在设计店铺的时候还是有很大的限制，比如：我们想让鼠标在经过某一块儿的时候让其变颜色（如下图），鼠标在依次经过以下模块儿的时候会变颜色。这是什么原因呢？这里就是调用了淘宝的widget规范可以使其进行轮播。这种轮播我们也可以用于自己的店铺的大图海报轮播，在这里我就不说这个了，主要是说怎么使鼠标经过的时候变色的原因。谈到这个鼠标经过能变色也是我在装修店铺利用淘宝Widget规范的时候，突然想到的，其精髓所在就是利用了弹出层（Popup）。好，下面我们进入正题：首先，我们先看一个弹出层的小例子（点击下载）：我们所需要的DOM结构本组件作为一个弹出层的效果，通过预先设置一个隐藏的弹出层，并且设置该弹出层的触点，通过鼠标滑入和移出触点来展示和隐藏弹出层效果代码如下： 该段代码的效果如下图所示： 鼠标未经过该区域的样式 鼠标经过该区域后的样式配置参数列表配置参数参数可选值作用说明trigger自定义触点元素，就是鼠标滑过哪个元素的时候弹出当前的popup，支持class和id选择器的写法alignnode,points,offset 三个配置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坐标之间的偏移量在测试过该实例之后，可能会有朋友大概明白了，如何是鼠标经过那些类似于导航的区域，使其变色了，其实就是一个弹出层，鼠标在经过的时候使其弹出即可，弹出的那个层跟导航的区域大小相同即可。代码如下： 我是帅 /opacity为降低图片透明度 我是帅 你觉得呢 要是你觉得我不帅 那么请你跳出来 /opacity为降低图片透明度 将以上代码在淘宝店铺装修里测试即可得出一下结果了这样就能使我们的店铺在买家浏览的时候更加的有质感了。下面我将整理好的素材都分享给大
人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论