艺灵设计

全部文章
×

天猫店铺悬浮代码分享

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-10-30 10:12:43 - 阅: - 评:2 - 积分:0

咳咳,首先告诉大家一个坏消息,就是天猫在10月底时再次屏蔽了悬浮代码,这下可苦逼了那些想要悬浮的商家。洒家也是一样,但洒家不甘心啊,于是翻遍天猫源码,终于有所收获,意外发现竟然有7个悬浮的样式,哼哼!(得瑟一下)。样式名称如下:

  1. #J_CommonBottomBar<!--①-->
  2. .tshop-psm-shop-ww-hover<!--②-->
  3. .tshop-pbsm-tmall-srch-list .ui-feed<!--③-->
  4. .tshop-pbsm-tmall-srch-list .filter-fix<!--④-->
  5. .tml-mask-b2b<!--⑤-->
  6. .mui-mbar<!--⑥-->
  7. .tmcBodyMask<!--⑦-->

发现了属性,接下来就是试验阶段。首先排除①,理由:禁用id。接下来说⑥。⑥是最常用的天猫悬浮代码,但最近淘宝来大姨妈了,一个大招便把这个悬浮给秒杀了,只留下一个-_-,好苦逼的表情啊!由于自己一直没有用过②-⑤,今天就来操刀下,结果以失败而告终!尽管天猫屏蔽的悬浮代码,但也不乏有一些牛逼哄哄的商家仍然屹立于泰山之巅,突破悬浮限制。例如:马尔杜克。(咳咳,尽管不是第一个发现的,但至少现在突破了。)那么,这个悬浮代码究竟是怎么样的呢?还记得有个⑦没有说么。事实上,⑦就是无敌的悬浮(虽然暂时测试能用)。在使用时需要注意给该样式设置自己的属性,例如:背景,透明度,宽,高都不要少,否则,你懂的。下面几张操作图供参考:

7种方法测试结果
天猫店铺悬浮代码分享
下面附一张马尔杜克家的悬浮图:
马尔杜克家悬浮

2013.11.01 更新   

咳咳,今天早上来到公司打开电脑,发现页面悬浮不见了,坑爹啊!翻源码发现问题所在,这次淘宝将上面的第个给干掉了。心中万个草尼马奔腾而过,等会美工妹子们上班时发现悬浮不见了肯定又苦逼了我。于是再次翻尽淘宝的源码.......

找啊找啊找朋友,找到一个好朋友......哈哈,终于找到你了。11月1日最新悬浮代码框架:.tm-mcBodyMask<!--⑧--> 操作图如下:
11月1日最新悬浮框架

2013.11.07 10:30更新   

刚在群里听到有人说悬浮没了,看了下自己的店,但还存在。听他们说是一发布就没了,然后看了几家店,妹的,屏蔽了属性,这个最新的悬浮还在研究中。奉劝已经有悬浮的店铺不要“发布”哈,淘宝这个坑爹的货,无节操。操。操。操。操。操。。。。。。。。。。。。。。。。。。。。。。。。

咳咳,无敌悬浮的方法,妈妈再也不用担心坑爹的淘宝屏蔽属性了。既然淘宝这个坑爹的货总是屏蔽掉最新的悬浮代码,那么我们这些商家也不能坐以待毙!对付淘宝这种无耻的货,我们要从根源入手,直接把悬浮做到背景图片里面,在ps里面控制好位置,然后背景图片固定不动,完暴淘宝!下面附本店的背景源码:

  1. <div class="sn-simple-logo" style="background-image: url(http://img01.taobaocdn.com/imgextra/i1/1758846006/T2_X83XDXaXXXXXXXX_!!1758846006.gif);background-position: -60px 170px;background-repeat: no-repeat;background-color: transparent;z-index: 99;width: 280px;background-attachment: fixed;left: -40px;height: 100%;">
  2.   <a class="follow-btn j_CollectBrand" data-brandid="20972725" data-spm-anchor-id="a1z10.1.w4006-3069211968.9" data-spm-wangpu-module-id="4006-3069211968" href="#" style="height:100%;display:block;" target="_blank"></a>
  3. </div>

附图一张

怎么样,看着很逼真吧。

注:不同的店铺会用不同的悬浮图片,也有的店铺是付费买的模版。在这里要修改以下几个属性的值,background-position, width, left, z-index, height具体值在源码中多测试几次即可。

2013.11.30 更新   

告诉大家一个好消息,天猫悬浮可以使用了,c店的也是可以使用的,具体源码框架请参见于《分享5款c店悬浮代码框架》,更换本文前面列举出的样式即可,案例中的第一个天猫与c店通用。

2014.10.09 15:40更新   

悬浮模块辅助工具应用地址:http://www.yilingsj.com/zxsc/lbtx/2014-09-18/209.php

2015.03.25 更新   

悬浮已更新,可使用软件生成,链接地址:http://www.yilingsj.com/zxsc/lbtx/2014-09-18/209.php

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/code/2013-10-30/106.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 天猫店铺悬浮 悬浮代码 淘宝店铺装修 c店悬浮 fixed

上一篇: 纯css实现超宽图片全屏居中(兼容淘宝店铺)   下一篇: 天猫详情页关注自定义背景

评论区