淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 5070|回复: 13
收起左侧

无需CSS权限,实现伪悬浮的效果

[复制链接]
  • TA的每日心情
    吐舌头
    2015-10-21 14:27
  • 签到天数: 21 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    5

    主题

    134

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    15791

    QQ
    发表于 2015-3-17 13:52:31 | 显示全部楼层 |阅读模式


    淘宝吧fixed属性屏蔽了,所以现在基本上都不能使用悬浮效果了。只能通过购买模块或者其他方法来实现。

    这里米色给大家提供一种相对比较简单的悬浮方法,下面将会来说下这种方法的优缺点。

    • 优点:无需调用官方一些悬浮的CSS来实现,也不需要担心会失效,可以说会永久使用
    • 缺点:当然既然不是直接写fiexd属性实现,那肯定有自己的缺陷,就是只能实现单个悬浮链接,如果想实现很多分类的链接,那就需要其他方法来破解了。



    下面是代码:

    • <!--悬浮链接-->
    •   <div class="footer-more-trigger miser-fiexd" style="border:0px; padding:0px; width:190px; height:auto; ;top:0px; left:auto;">
    •       <a href="#" target="_blank">
    •           <div class="sn-simple-logo most-footer" style="border:0;padding:0;opacity:1;width:140px;height:9999999px;left:385px;top:110px;border:none;padding:0;overflow:hidden;background:none;"> </div>
    •           </a>
    •   </div>
    •   <!--悬浮链接结束-->

    [color=rgb(51, 102, 153) !important]复制代码




    下面是悬浮使用方法:

    1-可以通过自定义模块背景固定或者直接通过固定背景代码,在页面背景先做出一个悬浮的图片
    2-然后将这段代码放进任意一个自定义模块里面,通过调整参数来控制链接的位置



    <!--悬浮链接-->
      <div class="footer-more-trigger miser-fiexd" style="border:0px; padding:0px; width:190px; height:auto; ;top:0px; left:auto;">
          <a href="#" target="_blank">
              <div class="sn-simple-logo most-footer" style="border:0;padding:0;opacity:1;width:140px;height:9999999px;left:385px;top:110px;border:none;padding:0;overflow:hidden;background:none;"> </div>
              </a>
      </div>
      <!--悬浮链接结束-->
    粉色为链接的宽度(也就是你悬浮的宽度)
    红色为链接距离左边的距离
    蓝色为链接距顶距离(不过你一般不需要修改这个)




    其他说明:
           如果代码放进店铺,链接位置有偏差 自己去修改代码。不是代码的问题哈


    淘宝装修代码地址http://kdt.im/JVb26j
    头像被屏蔽
  • TA的每日心情

    2015-6-10 02:39
  • 签到天数: 32 天

    连续签到: 2 天

    [LV.5]略有小成

    2

    主题

    47

    帖子

    6155

    积分

    禁止发言

    阅读权限: 0

    积分
    6155

    发表于 2015-3-18 15:48:15 | 显示全部楼层
    提示: 作者被禁止或删除 内容自动屏蔽
    签名被屏蔽
    回复 支持 1 反对 0

    使用道具 举报

  • TA的每日心情
    不爽
    2015-12-30 12:27
  • 签到天数: 277 天

    连续签到: 1 天

    [LV.8]自成一派

    8

    主题

    311

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    49111

    发表于 2015-3-17 15:03:37 | 显示全部楼层
    厉害

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    加油
    2017-8-12 23:54
  • 签到天数: 160 天

    连续签到: 1 天

    [LV.7]炉火纯青

    3

    主题

    150

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    25145

    发表于 2015-3-17 16:39:17 | 显示全部楼层
    厉害啊  

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情

    2017-10-2 00:50
  • 签到天数: 1206 天

    连续签到: 1 天

    [LV.10]功行圆满

    60

    主题

    6128

    帖子

    54万

    积分

    版主

    阅读权限: 100

    黄皮很酸吗? 糖糖很甜吗? 亲 我一下犯法吗?

    Rank: 12Rank: 12Rank: 12

    积分
    542969

    最佳新人热心会员宣传达人推广达人活跃会员优秀版主

    QQ
    发表于 2015-3-17 16:52:22 | 显示全部楼层
    内容溢出了
    >>>>>>挖掘淘宝Bug与代应用:364384606<<<<<<
  • TA的每日心情
    委屈
    2015-5-1 17:08
  • 签到天数: 26 天

    连续签到: 3 天

    [LV.4]初窥堂奥

    7

    主题

    59

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    32744

    天猫美工最佳新人

    发表于 2015-3-17 17:01:15 | 显示全部楼层
    多做几个自定义是不是就有好多链接啦?
    机会是留给有准备的人
  • TA的每日心情
    不爽
    2016-1-28 09:25
  • 签到天数: 124 天

    连续签到: 1 天

    [LV.7]炉火纯青

    3

    主题

    35

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    26853

    QQ
    发表于 2015-3-18 10:32:06 | 显示全部楼层
    牛比哄哄
    我就是我
  • TA的每日心情
    抱抱
    2016-1-24 11:05
  • 签到天数: 12 天

    连续签到: 1 天

    [LV.3]武林新秀

    0

    主题

    18

    帖子

    2378

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2378

    最佳新人

    发表于 2015-3-18 11:42:04 | 显示全部楼层
    不错啦!!
    我的店铺:shop110698114.taobao.com

    主营个性手链/定制礼物手绳/银器饰品
  • TA的每日心情
    吐舌头
    2015-10-21 14:27
  • 签到天数: 21 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    5

    主题

    134

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    15791

    QQ
     楼主| 发表于 2015-3-18 15:28:22 | 显示全部楼层
    大家多交流学习哈

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    加油
    2015-3-20 02:26
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    8

    主题

    54

    帖子

    4038

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    4038

    发表于 2015-3-19 21:15:45 | 显示全部楼层
    MISER 发表于 2015-3-18 15:48
    下次发帖,记得加上转载 好多人问我 这个是不是我的帐号,所以才来看下的。
    ...

    哈哈!!老米 我也发现不对!!!

    就算没有美工,你的网店也可以狂拽炫酷
    东东的网店:http://gbjddd.taobao.com
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|坛主个人微信公众号|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2017-11-18 21:40 , Processed in 0.140736 second(s), 21 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表