【通知】
【350模板全新升级】增加手机模板、海报模板----登陆账号进入后台,直接升级为旗舰版,点击查看详情》》
当前位置:首页 > 店铺装修 > 正文内容
十一月5日

时间:2014-11-05 13:22

天猫淘宝店铺左侧悬浮和右侧悬浮代码

0
分类:店铺装修 | 评论:1人 | 浏览:58,722次   

最近很多店铺都喜欢在左右两测添加悬浮导航,在这里说说怎么添加代码!如图所示:

在首页添加一个自定义内容模块,然后点”源码”按钮,把代码粘帖进去就可以了!

直接从本网页上复制代码,可能不能使用,请下载代码自行修改!

天猫淘宝悬浮代码下载http://pan.baidu.com/s/1ntwVVrr

天猫店铺悬浮代码如下:

<div class=”J_TWidget” style=”position: relative;z-index:99;” data-title=”" data-widget-config=”{‘duration’:0.1,’activeTriggerCls’:’.tshop-psm-shop-ww-hover’,'effect’:'scrollx’,'interval’:0.1,’activeIndex’:1,’navCls’:'dmxf’,'contentCls’:'dmxf2′,’autoplay’:true}” data-widget-type=”Carousel”>
<ul class=”dmxf2″ style=”display: none; position:absolute;”>
<li style=”display: block; float: left;”></li>
</ul>
<ul class=”dmxf”>
<li style=”width:250px;height:434px;left:10px;top:150px;”>
<img src=”http://img03.taobaocdn.com/imgextra/i3/770213269/TB26cTNaVXXXXX_XXXXXXXXXXXX_!!770213269.png” border=”0″ usemap=”#Map5476578″ /> <map name=”Map5476578″> <area shape=”rect” coords=”43,124,171,185″ href=”http://detail.tmall.com/item.htm?spm=a1z10.5.w4011-2670167419.64.lOLpcI&id=22199375712&rn=fb6f91b993470354ba58eb4bc1468e83&abbucket=15″ target=”_blank”> <area shape=”rect” coords=”47,215,168,322″ href=”http://detail.tmall.com/item.htm?spm=a1z10.4.w5003-9274535836.5.Xugwhb&id=35359502024&rn=e5bc31fa17ad05899c1e2f3ea214331a&abbucket=0&scene=taobao_shop” target=”_blank”> <area shape=”rect” coords=”83,354,161,384″ href=”#”></map>
</li>
</ul>
</div>

 代码注解,详细说明:

1、上面红色部分代码是图片添加热点链接后的代码,大家在使用的时候,先把自己的图片添加热点链接,然后替换这段代码

2、蓝色部分代码可以设置图片的高宽与宽度、设置悬浮的位置和相对上下的距离

<li style=”width:250px(图片宽度);height:434px(图片高度);left:10px(left是左悬浮,right是右悬浮);top:150px(相对上下的距离,可自行修改看效果,设置得越小,越靠上,设置得越大,越靠下,一般150-250之间就行);”>

3、图片最好做成png格式,背景透明,代码里面的图片宽度与高度,要根椐你自己图片的大小来设置,不能随意设置!

淘宝C店悬浮代码:

<div class=”J_TWidget” style=”position: relative;z-index:99;” data-title=”" data-widget-config=”{‘activeTriggerCls’:’.tshop-psm-shop-ww-hover’,'interval’:0.1,’activeIndex’:1,’autoplay’:true}” data-widget-type=”Tabs”>
<div class=”ks-switchable-content ks-switchable-nav”>
<div style=”display:block;width:250;height:434;left:10px;top:150px;z-index:2;outline: none;”>
【中间加入添加热点的代码】
</div>
</div>
</div>

修改方法跟天猫店铺修改方法一样!

如有问题,请联系旺旺:通学院

 

 

来源:学通网络(售后指导QQ号:3246731299),转载请注明出处,谢谢!

  • 评论:(1)
  • 有图有真相

已有 1 位网友发表了一针见血的评论,你还等什么?

◎页面往下拉吧,有更多精彩评论!(禁止无中文的评论内容!)

  1. 1 李成华
    Post:2016/09/20 15:00:40

    天猫无线端怎样添加悬浮导航呢

站内搜索