艺灵设计

全部文章
×

红包悬浮

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

适用范围:以下源码优先适用于付费的B/C店   注:付费一词仅指开通旺铺CSS样式。文章于2014.09.20 23:15时更新过

最近一直比较忙比较忙~~~,今天抽空写了一个红包悬浮的效果,如下图:

源码已在店铺测试完毕,可用。下面附源码,拷贝后请自行更换图片即可,无需其它操作。

css样式:

  1. <!--红包悬浮样式表-->
  2. <link href="http://www.yilingsj.com/d/file/code/2013-12-10/hbxf.css" rel="stylesheet" type="text/css">

html模块内容:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>红包悬浮---艺灵设计,qq群:231749938</title>
  6. <meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
  7. <meta name="keywords" content="悬浮代码,c店悬浮,天猫悬浮,动态悬浮,创意悬浮,淘宝店铺装修,统一框架,特效源码">
  8. <meta name="description" content="悬浮代码,c店悬浮,天猫悬浮,动态悬浮,创意悬浮,淘宝店铺装修,统一框架,特效源码">
  9. <span class="c999"><!--红包悬浮样式表--></span>
  10. <link href="/d/file/code/2013-12-10/hbxf.css" rel="stylesheet" type="text/css">
  11. </head>
  12. <body>
  13. <!--复制开始-->
  14. <div class="J_TWidget" data-widget-config="{'duration':0.1,'activeTriggerCls':'.tshop-psm-shop-ww-hover','interval':0.1,'effect':'scrollx','activeIndex':1,'navCls':'ylsj-hd_xf','contentCls':'ylsj-bd_xf','autoplay':true}" data-widget-type="Carousel" style="position:relative;">
  15.  <ul class="ylsj-bd_xf" style="display:none;"><li"></li></ul>
  16.  <ul class="ylsj-hd_xf">
  17.   <li class="tshop-psm-shop-ww-hover" style="z-index:23;">
  18.    <div class="ylsj-hb ylsj-ts_all5">
  19.    <span class="ylsj-hb_tsy ylsj-ts_all5">毛爷爷~↓</span>
  20.    <span class="ylsj-hb_lh ylsj-ts_all5"><img src="/d/file/code/2013-12-10/礼盒.png" /></span>
  21.    <span class="ylsj-hb_money ylsj-ts_all5">
  22.    <span class="ylsj-hb_money10 ylsj-ts_all5"><img src="/d/file/code/2013-12-10/10.jpg" /></span>
  23.    <span class="ylsj-hb_money20 ylsj-ts_all5"><img src="/d/file/code/2013-12-10/20.jpg" /></span>
  24.    <span class="ylsj-hb_money50 ylsj-ts_all5"><img src="/d/file/code/2013-12-10/50.jpg" /></span>
  25.    <span class="ylsj-hb_money100 ylsj-ts_all5"><img src="/d/file/code/2013-12-10/100.jpg" /></span>
  26.    </span>
  27.    </div>
  28.   </li>
  29. </ul>
  30. </div>
  31. <!--复制结束-->
  32. </body>
  33. </html>

点此下载:→→【代码】红包悬浮.zip   

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

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

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

Tag: 红包悬浮代码 B/C店悬浮 鼠标滑过创意悬浮特效 淘宝店铺装修 fixed

上一篇: 懒人代码说明   下一篇: c店导航特效(平面360度旋转)

评论区