艺灵设计

全部文章
×

天猫店铺另类悬浮代码

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-11-03 21:14:25 - 阅: - 评:0 - 积分:0

前几天分享了天猫左侧悬浮代码,不明真相的客官请猛戳《天猫店铺悬浮代码分享》。后来在群里面看到有的亲提出一种效果,如图:
悬浮关注小猫
效果分析:鼠标滑过时,小猫进行位移,离开时,恢复位置
其实这个原理是很简单的,在悬浮的基础上添加css3滑过属性。下面来分享源码框架:

  1. <div style="height:300px;">
  2.  <div class="sn-simple-logo" style="height:300px">
  3.   <div class="tm-mcBodyMask" style="background:none;opacity:1;width:10px;height:10px;">
  4.    <div class="user-po_a gz1" >
  5.    <a class="follow-btn j_CollectBrand" data-brandid="83776290" href="#" hidefocus="true" data-spm-anchor-id="a1z10.4.0.0" target="_blank"><img src="关注小猫图片" /></a>
  6.    </div>
  7.   </div>
  8.  </div>
  9. </div>

下面对上述源码进行分析:
另类悬浮说明

注:由于11月7号上午淘宝屏蔽掉了样式,最新方法参见于前面发表的《天猫店铺悬浮代码分享》一文,后续更新中介绍有方法。

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

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

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

Tag: 天猫店铺悬浮代码 c店悬浮代码 带关注的悬浮代码 动态悬浮 淘宝店铺装修 css3过渡效果

上一篇: 天猫详情页关注自定义背景   下一篇: 马尔杜克家双11最新特效

评论区