扣分说明:
若文章中的链接为红色则表示浏览需要积分,慎重点击!

分享5款c店悬浮代码框架

作者:艺灵设计 来源:http://www.yilingsj.com 时间:2013-11-30 15:57:52 / 扣除点数:0

适用范围:付费/未付费的B/C店均可,但详情页失效!

淘宝里面牛人还是比较多的,洒家很佩服那些敢于尝试的人,虽然目前为止还一个都不认识吧,但自己从牛人店铺中也学到一些东西,得出一个结论:实践出真理!以后洒家得多做实验才行。费话就不多说了,接下来分享几款c店的悬浮代码框架。

可选样式名:

  1. .tshop-psm-shop-ww-hover<!--①天猫/c店通用--懒人模式首选-->
  2. .site-nav-fixed<!--②-->
  3. .cbu-cover<!--③-->
  4. .cbu-iframe<!--④-->
  5. .mini-cart-plugin<!--⑤-->
天猫店演示
  1. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'duration':0.1,'activeTriggerCls':'.tshop-psm-shop-ww-hover','effect':'scrollx','activeIndex':1,'navCls':'user-bd11','contentCls':'user-hd11','interval':0.1,'autoplay':true}">
  2.  <ul class="user-hd11" style="display:none;"><li></li></ul>
  3.  <ul class="user-bd11">
  4.   <li style="visibility: visible;left:0px;top:300px;">
  5.    <div style="width:200px;height:30px; background:#000;color:#fff">
  6.    .tshop-psm-shop-ww-hover
  7.    </div>
  8.   </li>
  9.  </ul>
  10. </div>
注:由于原c店页面已经删除,预览页面为天猫页面。但源码是兼容c店的!

附以上源码的效果图一张:

接下来再附一张源码分析图:

上面提供了5种c店的悬浮样式,可进行任意更换,注意上图中的说明!天猫的悬浮也是同理,只需要更换天猫中的样式即可。不怕麻烦的可以去看前面天猫的样式《天猫店铺悬浮代码分享》。懒人模式建议选用上面5种中的第一种,在天猫中也是可以直接应用。

注:分享的目的是受益于大家,希望大家有什么好东西也都分享出来,交流交流嘛!分享一下又不怀孕的。
如果您觉得本站的文章对您的学习有所帮助,欢迎您与朋友分享至:
用户名: 密码: 验证码: 匿名发表

近期更新

热门点击

站长推荐

关于艺灵 | 广告服务 | 网站地图 | 艺灵团队 | 读者留言
Copyright © 2012 - 2013 艺灵设计, all rights reserved. 技术支持:艺灵设计 网站备案:豫ICP备13015019
特别申明:本站内容仅供个人学习参考,不做其它用途.