淘宝店铺装修之弹出层

淘宝店铺装修中，较常用到弹出层特效，如导航，产品详情等等。本文就详细介绍了popup弹出层的用法。

操作方法

  • 01

    首先，准备好素材图片用来做弹出层和鼠标移入层。

  • 02

    进入淘宝后台，新建一个自定义内容区，并点击进入代码模式。到此，准备的工作全部完成，下面进入代码编写模式。

  • 03

    如果你有代码基础很好，如果没有也没关系，copy就OK了，弹出层需要应用淘宝的widget规范，具体代码为：<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':['cr','cc']}}"><div style="background-color: yellow; height: 100px; width: 100px;"></div> </div>（这里方便复制，看图熟悉用法）

  • 04

    这是我的示例，其中trigger是鼠标滑过哪个元素的时候弹出当前的popup，可用class和id，node是相对于哪个元素的位置，points表示与元素哪里对齐，其中 t(上)，c(中), b(下),l(left),r(右)  ，offset基本用于微调, 在x,y坐标之间移动。

  • 05

    其中定位较难理解，补充个定位图。

赞 (0)

相关推荐

  • 如何设置取消淘宝登陆页面弹出[是否只查看安全传送的网页内容]

    选择IE工具intemt选项,在选项卡里选择[安全],然后在安全选项卡里点[自定义级别],在设置里找到[其他]这个分类,在次分类下找到[显示混合内容]选择[启用]然后保存退出就OK了, 其实根本不是问 ...

  • 淘宝店铺装修--懒人必备

    相信很多新人在淘宝开店时都会遇到一个同样的问题:如何装修店铺.很多人觉得去学PS,去学设计,或者听信其他推销人员的话,交一笔钱后对方给你装修,给你P图等等.其实这些完全没必要,淘宝也早就考虑到这类问题 ...

  • 怎么隐藏淘宝中已经给出的评价

    怎么隐藏淘宝中已经给出的评价

    在淘宝购物可以给商品进行评价,如果我们给出评价后不想展示出来,怎么隐藏呢?下面一起来看看吧.具体如下:1. 第一步,我们打开手机里的淘宝,并登录我们的账号:2. 打开淘宝进入后,点击右下角" ...

  • 新版手机淘宝店铺怎么装修将自己的手机淘宝店铺装修下

    手机淘宝店铺怎么装修?小编带来了新版手机淘宝店铺装修教程，很多商家不知道该如何装修自己的手机淘宝店铺，会不会很难呢?大家可以通过下文来了解详细内容哦~ 我们可以通过淘宝网官网来直接管理手机淘宝店铺，方 ...

  • axure动态面板怎么用? Axure动态面板制作页面弹出层的教程

    在快速原型制作中,我们通常会使用到Axure软件,有一些地方我会想要达到在页面做出弹出层的效果,这个时候为了快速达到效果,在Axure中,我们会用到动态面板:下面我就自己在这方面遇到的困难和效果介绍一 ...

  • 淘宝店铺怎样免费升级为专业版/淘宝店铺装修

    简介 01 对于刚开淘宝店的小卖家来说,默认的店铺版面可能满足不了你的需求,淘宝店铺分为基本版,专业版之类的,肯定版本越高功能越多,出来的效果会更好,很多模板需要掏租金,但如果你是刚开店的话,可以免费 ...

  • 淘宝店铺装修如何优化宝贝详情页

    操作方法 01 淘宝宝贝详情页面对于买家来说,更加直观详细地了解商品.对于卖家来说既是详细说明了宝贝的用途以及各个功能等,减少售前客服的咨询工作量,提高效率.宝贝详情页是影响转化率的最重要因素.通过数 ...

  • jeesite怎么弹出层

    jeesite怎么弹出层,以及关于layer,小编今天告诉你! 操作方法 01 关于web弹出层 之前做web弹出层,使用的是jqueryui,那个复杂,那个大. 而且样式怪怪的.而且文件很大. 02 ...

  • 淘宝店铺装修教程——如何打造C店的形象

    操作方法 01 流量转换率是否高很大程度上取决于店铺的装修,一个店铺是否给人"大牌"的感觉,取决于该顾客是否会购买你的商品,否则无论你做再多的直通车丶钻石展位,再怎样引爆流量也是无 ...