淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 4706|回复: 18
收起左侧

一个逗比的变换悬浮

[复制链接]
  • TA的每日心情
    吐舌头
    2015-4-6 19:54
  • 签到天数: 17 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    29

    主题

    144

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    44366

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

    QQ
    发表于 2015-4-6 11:27:49 | 显示全部楼层 |阅读模式
    本帖最后由 kshen 于 2015-4-6 11:28 编辑

    xf.gif



    女士们,先生们,早上好,我想死你们了!
    Nv hang zi and doubi, zao shang good, I miss you.

    大家一定非常期待悬浮这个玩意对不?
    You yiding very look forward to xuanfu all right?

    (期待个屁啊,几百年前就有了)
    (mysterious ni mei, lao zi know that one bai years)

    下面的观众请配合一点好吗!
    Please cooperate with me please.

    (哇哦!好期待~鹅妹子嘤!)
    wo le ge cao! I love you 2BK~Amazing!

    好的谢谢,我就知道你们很期待。。。
    Ok thanks, I know you are fang qi zhi liao...

    这次的悬浮和以往的不同,滚动会切换,当然也能完成相应点击。
    This is different, It's gao da shang.

    废话不多说,让我们来看一看代码。
    No BB a lot, Let's to see the ma le ge bi.

    1. <div class="sn-simple-logo most-footer" style="border:none 0;padding:0;border:none;padding:0;top:0px;left:auto;height:10px;width:60px;background:none;">
    2.    <a href="#" target="_self">
    3.   <div class="sn-simple-logo most-footer" style="z-index:97;border:none 0;padding:0;border:none;padding:0;top:300px;left:-160px;height:1000px;width:70px;opacity:0.8;background:url(http://img03.taobaocdn.com/imgextra/i3/353516414/TB2bZOCcXXXXXagXpXXXXXXXXXX_!!353516414.gif) top center no-repeat fixed;">
    4.      
    5.   </div>
    6.    </a> <a href="#ft" target="_self">
    7.   <div class="sn-simple-logo most-footer" style="z-index:99;border:none 0;padding:0;border:none;padding:0;top:300px;left:-90px;height:1000px;width:70px;opacity:0.8;background:url(http://img03.taobaocdn.com/imgextra/i3/353516414/TB2bZOCcXXXXXagXpXXXXXXXXXX_!!353516414.gif) top center no-repeat fixed;">
    8.      
    9.   </div>
    10.    </a>
    11. </div>


    12. <div class="sn-simple-logo most-footer" style="border:none 0;padding:0;border:none;padding:0;top:0px;left:auto;height:10px;width:160px;background:none;">
    13.    <a  target="_self">
    14.   <div class="sn-simple-logo most-footer" style="z-index:98;border:none 0;padding:0;border:none;padding:0;top:1300px;left:-170px;height:1000px;width:160px;opacity:0.8;background:url(http://img04.taobaocdn.com/imgextra/i4/353516414/TB2Tn8mcpXXXXcQXXXXXXXXXXXX_!!353516414.png) top center no-repeat fixed;">
    15.      
    16.   </div>
    17.   </a>
    18. </div>


    19. <div class="sn-simple-logo most-footer" style="border:none 0;padding:0;border:none;padding:0;top:0px;left:auto;height:10px;width:60px;background:none;">
    20.    <a href="#" target="_self">
    21.   <div class="sn-simple-logo most-footer" style="z-index:97;border:none 0;padding:0;border:none;padding:0;top:2300px;left:-160px;height:5000px;width:70px;opacity:0.8;background:url(http://img03.taobaocdn.com/imgextra/i3/353516414/TB2bZOCcXXXXXagXpXXXXXXXXXX_!!353516414.gif) top center no-repeat fixed;">
    22.      
    23.   </div>
    24.    </a> <a href="#ft" target="_self">
    25.   <div class="sn-simple-logo most-footer" style="z-index:99;border:none 0;padding:0;border:none;padding:0;top:2300px;left:-90px;height:5000px;width:70px;opacity:0.8;background:url(http://img03.taobaocdn.com/imgextra/i3/353516414/TB2bZOCcXXXXXagXpXXXXXXXXXX_!!353516414.gif) top center no-repeat fixed;">
    26.      
    27.   </div>
    28.    </a>
    29. </div>
    复制代码
    代码大小:2kb

    网盘
    http://pan.baidu.com/s/1jG5nQsA

    围观地址http://love2k.taobao.com/

    好了,到这里结束。
    sa you na la.



  • TA的每日心情
    加油
    2016-8-27 22:19
  • 签到天数: 277 天

    连续签到: 1 天

    [LV.8]自成一派

    33

    主题

    1035

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    79535

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

    QQ
    发表于 2015-4-6 11:35:12 | 显示全部楼层
    很赞呢 请问下 大神你是不是把悬浮层级别 代码 z-index:  改变比较高的呀?
  • TA的每日心情
    臭美
    2016-6-2 11:53
  • 签到天数: 145 天

    连续签到: 1 天

    [LV.7]炉火纯青

    6

    主题

    171

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    27657

    QQ
    发表于 2015-4-6 12:11:43 | 显示全部楼层
    这个厉害了
    来自安卓客户端来自安卓客户端
  • TA的每日心情
    抱抱
    2016-9-28 20:20
  • 签到天数: 158 天

    连续签到: 1 天

    [LV.7]炉火纯青

    18

    主题

    662

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    36323

    最佳新人热心会员

    发表于 2015-4-6 12:39:54 | 显示全部楼层
    好腻害哟
    http://shop103653300.taobao.com
  • TA的每日心情
    吐舌头
    2015-4-6 19:54
  • 签到天数: 17 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    29

    主题

    144

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    44366

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

    QQ
     楼主| 发表于 2015-4-6 13:17:24 | 显示全部楼层

    这个绝对是个新思路,脑洞够大可以做出很神奇的玩意,我就不多提了。

  • TA的每日心情
    大哭
    2016-6-24 23:41
  • 签到天数: 267 天

    连续签到: 1 天

    [LV.8]自成一派

    12

    主题

    687

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    56398

    最佳新人热心会员

    发表于 2015-4-6 13:51:16 | 显示全部楼层
    我就看看不说话

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


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

  • TA的每日心情
    无奈
    2016-1-27 13:48
  • 签到天数: 89 天

    连续签到: 1 天

    [LV.6]渐入佳境

    31

    主题

    599

    帖子

    6749

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6749

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

    发表于 2015-4-6 14:27:28 | 显示全部楼层
    好厉害!!!!

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


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

  • TA的每日心情
    抱抱
    2015-7-12 17:21
  • 签到天数: 26 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    35

    主题

    868

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    36524

    公司淘宝店铺

    QQ
    发表于 2015-4-6 16:10:28 | 显示全部楼层
    感谢,牛X啊。  赞。

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


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

  • TA的每日心情
    臭美
    2016-6-2 11:53
  • 签到天数: 145 天

    连续签到: 1 天

    [LV.7]炉火纯青

    6

    主题

    171

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    27657

    QQ
    发表于 2015-4-6 16:49:05 | 显示全部楼层
    楼主,好有咩
    来自安卓客户端来自安卓客户端
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-4 03:52 , Processed in 0.114553 second(s), 23 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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