淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3613|回复: 22
收起左侧

★普天同庆,无敌悬浮模块再一次问世★这一次你没看错

[复制链接]
  • TA的每日心情
    加油
    2015-3-20 02:26
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    8

    主题

    54

    帖子

    3434

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3434

    发表于 2015-3-21 20:32:18 | 显示全部楼层 |阅读模式
    标题我看错了吗?-----楼主告诉你:没有!


    真的是悬浮吗?加引号的悬浮吗?------楼主告诉你:这次不加引号,真是悬浮!


    啊,谁来打我一下让我看看是不是真的,眼睛快被标题闪花了!


    楼主大大你是好人,我们爱你!


    QQ图片20150321181552.jpg :咳咳,这个......那个......@#¥%(支支吾吾)
    大家还是先看完帖子,再来发表对楼主的爱哈,我怕你们顶不住,个别小伙伴可能因为太激动太热情想砍人,当然我还是可以理解,想感谢我嘛!


    悬浮.....啊~~多么美妙的一个模块啊!让我们为之魂牵梦萦,茶饭不思,辗转反侧,夜不能寐.....好一个悬浮....
    还记得当年大明湖畔......那个风和日丽......


    路人甲:打住,我们要听主题内容,没心情听你丫的在那里无病呻吟)
    ---------------------------------------------------------------------------------------------------------- -------------------
    先把刚刚那个乱插嘴的路人甲拖出去砍了,现在满足你们的要求,我们进入正题


    路人乙小声的说:(朋友,我是路过的,请问,悬浮是什么劳什子鬼玩意儿呀?)


    同样把路人乙也拖出去砍了....课堂要有课堂的纪律嘛,是不是?看人家路人丙就做的很好,给他鼓掌.......嘿嘿


    什么是悬浮?
    2.jpg
    悬浮就是上图所示,悬浮在宝贝展示模块的两侧的模块,一般呢,悬浮模块里面都是一些必要的热门分类,或者链接“锚点”,或者活动介绍,
    是为了方便顾客快速高效的找到他们所想要了解的区域,或者引导他们进入我们网店的某个模块,某款宝贝!是个非常人性化的设置!


    QQ截图20150321203057.png

    今天我们实现的动态效果下图:

    312123.gif
    (路人丙:艾玛,虽然我脑子笨,看上去,好像是悬浮耶!但是好像有种不对头的感觉呢?)


    PS:的确有点小小的不同,除了土豪开通CSS权限的做法,或者找到淘宝漏洞破解CSS权限,或者购买官方模板!普通
    固定不动的悬浮实现起来是很难!(楼主有预感,这时候估计有些小伙伴想打人了!


    换个思路:悬浮无非就是悬浮在两侧,虽然现在想要固定确实很难并且在上面加上各种链接!大不了,就不固定不动了!!
    反正意义也是在于引导顾客进入相应的专区,那么只要我们在每个自定义模板外加一个跟着动的悬浮模块,效果还不是一样的!

    ---------------------------------------------------------------------------------------------------------------------------------------------
    游客提问:那不是我的每一个模块要全部重新设计?
    楼主:完全不用的,只需要把代码拿到粘贴每一个现有的自定义模块的最后面或者最前面

    ---------------------------------------------------------------------------------------------------------------------------------------------
    游客提问:可以左悬浮or右悬浮吗?
    楼主:YES!想左边就左边,想右边就右边!哪怕是心里不爽!左右两边都可以搞上去!

    ---------------------------------------------------------------------------------------------------------------------------------------------
    游客提问:可以加上各种热点链接么?
    楼主:YES!想加就加!你平时在DW里面怎么加的热点,它还是怎么加!!(点击一下悬浮图片,利用热点工具框选热区就OK)

    好啦不卖关子了,代码送上:
    1. <div class="footer-more-trigger " style="border:0px; padding:0px; width:205px; height:auto; ;top:0px; left:auto;">
    2.       
    3.           <div class=" most-footer" style="border:0;padding:0;opacity:1;width:205px;height:679px;left:-205px;top:0px;border:none;padding:0;overflow:hidden;background:none; z-index:50"><img src="http://img02.taobaocdn.com/imgextra/i2/760372102/TB2rFqtcXXXXXbVXpXXXXXXXXXX_!!760372102.png" width="205" height="679"/> </div>
    4.            
    5.   </div>
    复制代码

    楼主:哟哟,黑喂狗~~赶紧拿去试试  哟!!错过这村没有这店了!!走过的,路过的....右边的大娘来试一下吗?超爽的!!嘿嘿

    观众:喂喂喂!你大爷的,还没告诉我们怎么用!!鬼知道是啥子效果?......
    ----------------------------------------------------------------------------------------------------------------------------------------------
    <div class="footer-more-trigger " style="border:0px; padding:0px; width:图片的宽度px; height:auto; ;top:0px; left:auto;">

              <div class=" most-footer" style="border:0;padding:0;opacity:1;width:图片的宽度px;height:图片的高度px;left:控制悬浮区域左右移动的数值px;top:控制悬浮区域上下移动的数值px;border:none;padding:0;overflow:hidden;background:none; z-index:999"><img src="您的图片地址" width="图片宽度" height="图片高度"/> </div>
    </div>

    (关于控制悬浮区域上下左右移动的大小数值!!大家自己去摸索!随便是多少都可以,只要你心里舒服 哈哈!!
    反正你们看着办吧!多的就不解释了!最后记得加上热点链接哦!)
    --------------------------------------------------------------------------------------------------------------------------------------------------
    看了东东这种深井冰风格的帖子,是不是人都不好了?
    哈哈, 万一有些奇葩家伙就是喜欢这种风格呢?
    大家可以进入我的网店http://gbjddd.taobao.com 给东东留言或者鼓励哦!!或者加我QQ 或者旺旺
    东东灰常乐意和大家一起分享关于淘宝装修的经验的哟!
    目的只有一个就是:认识更多电商界的好盆友哈!如果是自己做生意的朋友,有什么好的货源可以推荐给东东!
    东东的未来,就在你们手上啦!反正我已经把我活生生的交给你们了哈!你们要对我负责的....

    -----------------------------------------------------------------------------------------------------------------------------------------------
    PS:关于这篇帖子的灵感来源:是出自我的老师“米色设计”的“无需CSS权限实现伪悬浮”来的灵感!

    看到这里还是想要揍我的亲,记得把米色带上一起揍!!

    当然肯定也有不少感谢我的亲,我知道肯定有!!绝对有!就是你!只是你不说!其实我都知道....我懂!

    过来让楼主木木哒一个, 走的时候请带上放浪形骸的笑声~~~哈哈哈哈哈



    QQ图片20150320202206.gif

    评分

    参与人数 3美工币 +60 收起 理由
    Rain + 20 http://fatdiaosi.taobao.com/忍不住想装逼.
    bdk236 + 20 尼玛,写这个贴容易嘛我
    xjhdqq + 20 感谢分享!

    查看全部评分

    就算没有美工,你的网店也可以狂拽炫酷
    东东的网店:http://gbjddd.taobao.com
  • TA的每日心情
    加油
    2016-8-27 22:19
  • 签到天数: 277 天

    连续签到: 1 天

    [LV.8]自成一派

    33

    主题

    1035

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    79535

    天猫美工热心会员最佳新人活跃会员优秀版主

    QQ
    发表于 2015-3-21 20:55:20 | 显示全部楼层
    前排力顶!前排力顶!前排力顶!前排力顶!前排力顶!
  • TA的每日心情
    委屈
    2016-7-23 03:35
  • 签到天数: 89 天

    连续签到: 1 天

    [LV.6]渐入佳境

    10

    主题

    477

    帖子

    8万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    85930

    最佳新人热心会员宣传达人

    发表于 2015-3-21 21:56:42 | 显示全部楼层
    浪费了我十分钟来看。。。原来是伪悬浮

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


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

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

    连续签到: 1 天

    [LV.1]初学乍练

    8

    主题

    54

    帖子

    3434

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3434

     楼主| 发表于 2015-3-21 22:31:23 | 显示全部楼层
    xjhdqq 发表于 2015-3-21 20:55
    前排力顶!前排力顶!前排力顶!前排力顶!前排力顶!
    ...

    顶得一手好顶!!!谢谢亲的支持!!!很看好你!!

    就算没有美工,你的网店也可以狂拽炫酷
    东东的网店:http://gbjddd.taobao.com
  • TA的每日心情
    加油
    2015-3-20 02:26
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    8

    主题

    54

    帖子

    3434

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3434

     楼主| 发表于 2015-3-21 22:32:01 | 显示全部楼层
    Aising 发表于 2015-3-21 21:56
    浪费了我十分钟来看。。。原来是伪悬浮

    好吧!!对不起朋友,我错了!!你揍我吧

    就算没有美工,你的网店也可以狂拽炫酷
    东东的网店:http://gbjddd.taobao.com
  • TA的每日心情
    吐舌头
    2016-7-9 23:53
  • 签到天数: 406 天

    连续签到: 1 天

    [LV.9]已臻大成

    2

    主题

    304

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    73417

    发表于 2015-3-22 00:31:35 | 显示全部楼层
    牛逼的楼主!这都想得出来!!!

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


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

  • TA的每日心情
    加油
    2015-3-30 10:07
  • 签到天数: 81 天

    连续签到: 1 天

    [LV.6]渐入佳境

    14

    主题

    425

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    64117

    最佳新人热心会员宣传达人淘宝钻级店美工天猫美工

    发表于 2015-3-22 00:44:54 | 显示全部楼层
      浪费这么多时间来写个伪悬浮啊0.0  虽然很坑 但是还是赞一个吧.....   现在悬浮的代码很多...努力研究下吧!!

    千人淘宝佣金放单接单群觅高素质刷友 [url=http://shang.qq.com/wpa/qunwpa?idkey=a28e2b8f87e5e5ca84b3937e5a3f61a973ae11c97063b8686ff2b0ea5e2a6348]点击加入
  • TA的每日心情

    2016-4-8 17:27
  • 签到天数: 214 天

    连续签到: 1 天

    [LV.7]炉火纯青

    2

    主题

    460

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    44592

    天猫美工最佳新人热心会员

    发表于 2015-3-22 08:57:32 | 显示全部楼层
    精神分裂的楼主

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


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

  • TA的每日心情
    加油
    2016-2-28 16:47
  • 签到天数: 6 天

    连续签到: 1 天

    [LV.2]登堂入室

    7

    主题

    199

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23916

    发表于 2015-3-22 10:14:05 | 显示全部楼层
    看了那吆喝,好像是路边的王婆。。。不过谢谢分享

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


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

  • TA的每日心情
    加油
    2016-10-27 18:09
  • 签到天数: 176 天

    连续签到: 1 天

    [LV.7]炉火纯青

    6

    主题

    679

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    31431

    最佳新人热心会员

    发表于 2015-3-22 11:59:16 | 显示全部楼层
    谢谢楼主分享,你的热情感染人

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


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

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-4 10:01 , Processed in 0.137486 second(s), 27 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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