淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1261|回复: 10
收起左侧

多层移动弹起分类代码特效

[复制链接]
  • TA的每日心情
    加油
    2016-10-14 10:06
  • 签到天数: 32 天

    连续签到: 1 天

    [LV.5]略有小成

    12

    主题

    78

    帖子

    5926

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    5926

    最佳新人

    QQ
    发表于 2016-7-30 15:13:55 | 显示全部楼层 |阅读模式

    TB2_BmzrVXXXXXkXXXXXXXXXXXX-1047294665.gif

    这个代码是去年换版的时候做的,现在店铺里也在用,如果感兴趣的话可以去店铺浏览:trackman户外旗舰店

    以下代码需开通CSS权限才可以使用,<style></style>以内代码复制到店铺CSS框内点击保存。html代码复制到自定义内容区内即可。代码都经过测试使用,所以几乎不存在使用不了的情况。【如代码预览没有效果请发布以后再浏览】

    部分代码含有淘宝class="J_TWidget"功能,如果需要在本地浏览代码效果在代码最开头加上如下代码:
    <script src="http://a.tbcdn.cn/apps/pamirsshop/wiki/scripts/prettify.js" type="text/javascript"></script>
    <script src="http://a.tbcdn.cn/s/kissy/1.1.6/kissy.js"></script>
    <script src="http://a.tbcdn.cn/p/shop/1.0/mods/s/countdown/countdown-min.js"></script>
    <script src="http://a.tbcdn.cn/apps/pamirsshop/wiki/scripts/jquery-min-1.4.js"></script>
    <script src="http://a.tbcdn.cn/apps/pamirsshop/wiki/scripts/wiki.js"></script>
    <script>
    KISSY.ready(function(S){
    S.Countdown.autoRender();
    });
    </script>


    1. <style type="text/css">
    2. .tman_201507_fenlei{ position:relative; width:1950px; height:840px; overflow:hidden; background:url(https://img.alicdn.com/imgextra/i4/794977969/TB2vL8eeXXXXXb_XpXXXXXXXXXX_!!794977969.jpg) no-repeat}

    3. .tman_201507_fenlei .fenlei07_dmk{ position:absolute; left:375px; top:15px; width:1200px; height:314px; overflow:hidden}

    4. .tman_201507_fenlei .fenlei07_dmk .fenlei07_dmk_qd,.tman_201507_fenlei .fenlei07_dmk .fenlei07_dmk_zp{ width:600px; height:314px; overflow:hidden; float:left; position:relative}

    5. .tman_201507_fenlei .fenlei07_dmk .fenlei07_dmk_qd .fenlei07_dmk_qd_b,.tman_201507_fenlei .fenlei07_dmk .fenlei07_dmk_zp .fenlei07_dmk_zp_b{ position:absolute; top:0px; left:0px; opacity:0; transition:all 0.5s ease 0.2s}
    6. .tman_201507_fenlei .fenlei07_dmk .fenlei07_dmk_qd:hover .fenlei07_dmk_qd_b{ opacity:1;}

    7. .tman_201507_fenlei .fenlei07_dmk .fenlei07_dmk_zp:hover .fenlei07_dmk_zp_b{ opacity:1;}

    8. .tman_201507_fenlei .fenlei07_xmk{ width:1176px; height:406px; overflow:hidden; position:absolute;  left:404px; top:397px; }

    9. .tman_201507_fenlei .fenlei07_xmk ul{ padding:0px; margin:0px; list-style:none}

    10. .tman_201507_fenlei .fenlei07_xmk ul li{ float:left;}

    11. .tman_201507_fenlei .fenlei07_xmk ul li .fenlei07_xmk_li{ width:392px; height:203px; overflow:hidden; position:relative}
    12. .tman_201507_fenlei .fenlei07_xmk ul li .fenlei07_xmk_li .xmk_li_01{ position:absolute; left:110px; top:60px; transition:all 0.3s ease 0.2s; z-index:2}
    13. .tman_201507_fenlei .fenlei07_xmk ul li .fenlei07_xmk_li .xmk_li_02{ position:absolute; left:85px; top:80px; transition:all 0.5s ease 0.2s; z-index:2}
    14. .tman_201507_fenlei .fenlei07_xmk ul li .fenlei07_xmk_li .xmk_li_03{ position:absolute; left:105px; top:125px; transition:all 0.8s ease 0.2s; z-index:2}
    15. .tman_201507_fenlei .fenlei07_xmk ul li .fenlei07_xmk_li .xmk_li_04{ position:absolute; left:155px; top:220px; transition:all 1s ease 0.2s; z-index:2}
    16. .tman_201507_fenlei .fenlei07_xmk ul li .fenlei07_xmk_li .xmk_li_05{ position:absolute; left:0px; top:0px; transition:all 0.5s ease 0.2s; opacity:0; z-index:1}

    17. .tman_201507_fenlei .fenlei07_xmk ul li .fenlei07_xmk_li:hover .xmk_li_01{ position:absolute; left:110PX; top:40px}
    18. .tman_201507_fenlei .fenlei07_xmk ul li .fenlei07_xmk_li:hover .xmk_li_02{ position:absolute; left:85PX; top:60px}
    19. .tman_201507_fenlei .fenlei07_xmk ul li .fenlei07_xmk_li:hover .xmk_li_03{ position:absolute; left:105PX; top:105px}
    20. .tman_201507_fenlei .fenlei07_xmk ul li .fenlei07_xmk_li:hover .xmk_li_04{ position:absolute; left:155PX; top:140px}
    21. .tman_201507_fenlei .fenlei07_xmk ul li .fenlei07_xmk_li:hover .xmk_li_05{ opacity:1}

    22. </style>



    23. <div class="tman_201507_fenlei">
    24.   <div class="fenlei07_dmk">
    25.         <div class="fenlei07_dmk_qd">
    26.             <span class="fenlei07_dmk_qd_b"><img src="https://img.alicdn.com/imgextra/i3/794977969/TB2We0peXXXXXcNXXXXXXXXXXXX_!!794977969.jpg" width="600" height="314" /></span>
    27.             <img src="https://img.alicdn.com/imgextra/i4/794977969/TB2MatteXXXXXbMXXXXXXXXXXXX_!!794977969.jpg" width="600" height="314" />         
    28.         </div>
    29.         
    30.         <div class="fenlei07_dmk_zp">
    31.             <span class="fenlei07_dmk_zp_b"><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2OAFaeXXXXXc6XpXXXXXXXXXX_!!794977969.jpg" width="600" height="314" /></span>
    32.             <img src="https://img.alicdn.com/imgextra/i3/794977969/TB2Pg8peXXXXXcMXXXXXXXXXXXX_!!794977969.jpg" width="600" height="314" />         
    33.       </div>   
    34.   </div>
    35.   
    36.   <div class="fenlei07_xmk">
    37.     <ul>
    38.         <li><img src="https://img.alicdn.com/imgextra/i1/794977969/TB2tO0oeXXXXXXnXpXXXXXXXXXX_!!794977969.jpg" width="392" height="203" /></li>
    39.         <li>
    40.             <div class="fenlei07_xmk_li">
    41.                 <span class="xmk_li_01"><img src="https://img.alicdn.com/imgextra/i3/794977969/TB2vE8oeXXXXXcKXXXXXXXXXXXX_!!794977969.png" width="170" height="20"/></span>
    42.                 <span class="xmk_li_02"><img src="https://img.alicdn.com/imgextra/i2/794977969/TB2xz8AeXXXXXXVXXXXXXXXXXXX_!!794977969.png" width="195" height="40"/></span>
    43.                 <span class="xmk_li_03"><img src="https://img.alicdn.com/imgextra/i1/794977969/TB2M1NheXXXXXaoXpXXXXXXXXXX_!!794977969.png" width="195" height="30"/></span>
    44.                 <span class="xmk_li_04"><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2DlRxeXXXXXaMXXXXXXXXXXXX_!!794977969.png" width="55" height="55"/></span>
    45.                 <span class="xmk_li_05"><img src="https://img.alicdn.com/imgextra/i1/794977969/TB21pRueXXXXXbFXXXXXXXXXXXX_!!794977969.jpg" width="392" height="203"/></span>
    46.                 <img src="https://img.alicdn.com/imgextra/i2/794977969/TB2F.FveXXXXXbmXXXXXXXXXXXX_!!794977969.jpg" width="392" height="203" />
    47.             </div>
    48.         </li>
    49.         <li>
    50.             <div class="fenlei07_xmk_li">
    51.                 <span class="xmk_li_01"><img src="https://img.alicdn.com/imgextra/i1/794977969/TB2TAXseXXXXXaRXpXXXXXXXXXX_!!794977969.png" width="170" height="20"/></span>
    52.                 <span class="xmk_li_02"><img src="https://img.alicdn.com/imgextra/i1/794977969/TB2iklAeXXXXXcHXXXXXXXXXXXX_!!794977969.png" width="195" height="40"/></span>
    53.                 <span class="xmk_li_03"><img src="https://img.alicdn.com/imgextra/i1/794977969/TB2M1NheXXXXXaoXpXXXXXXXXXX_!!794977969.png" width="195" height="30"/></span>
    54.                 <span class="xmk_li_04"><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2DlRxeXXXXXaMXXXXXXXXXXXX_!!794977969.png" width="55" height="55"/></span>
    55.                 <span class="xmk_li_05"><img src="https://img.alicdn.com/imgextra/i3/794977969/TB2txNFeXXXXXbXXXXXXXXXXXXX_!!794977969.jpg" width="392" height="203"/></span>
    56.                 <img src="https://img.alicdn.com/imgextra/i4/794977969/TB24aBseXXXXXa.XpXXXXXXXXXX_!!794977969.jpg" width="392" height="203" />
    57.             </div>
    58.         </li>
    59.         <li>
    60.             <div class="fenlei07_xmk_li">
    61.                 <span class="xmk_li_01"><img src="https://img.alicdn.com/imgextra/i2/794977969/TB2E0dCeXXXXXccXXXXXXXXXXXX_!!794977969.png" width="170" height="20"/></span>
    62.                 <span class="xmk_li_02"><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2cK0GeXXXXXaSXXXXXXXXXXXX_!!794977969.png" width="195" height="40"/></span>
    63.                 <span class="xmk_li_03"><img src="https://img.alicdn.com/imgextra/i1/794977969/TB2M1NheXXXXXaoXpXXXXXXXXXX_!!794977969.png" width="195" height="30"/></span>
    64.                 <span class="xmk_li_04"><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2DlRxeXXXXXaMXXXXXXXXXXXX_!!794977969.png" width="55" height="55"/></span>
    65.                 <span class="xmk_li_05"><img src="https://img.alicdn.com/imgextra/i1/794977969/TB2oHRzeXXXXXc7XXXXXXXXXXXX_!!794977969.jpg" width="392" height="203"/></span>
    66.                 <img src="https://img.alicdn.com/imgextra/i2/794977969/TB213RDeXXXXXagXXXXXXXXXXXX_!!794977969.jpg" width="392" height="203" />
    67.             </div>
    68.         </li>
    69.         <li>
    70.             <div class="fenlei07_xmk_li">
    71.                 <span class="xmk_li_01"><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2YX4HeXXXXXaKXXXXXXXXXXXX_!!794977969.png" width="170" height="20"/></span>
    72.                 <span class="xmk_li_02"><img src="https://img.alicdn.com/imgextra/i3/794977969/TB2NuRteXXXXXaVXpXXXXXXXXXX_!!794977969.png" width="195" height="40"/></span>
    73.                 <span class="xmk_li_03"><img src="https://img.alicdn.com/imgextra/i1/794977969/TB2M1NheXXXXXaoXpXXXXXXXXXX_!!794977969.png" width="195" height="30"/></span>
    74.                 <span class="xmk_li_04"><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2DlRxeXXXXXaMXXXXXXXXXXXX_!!794977969.png" width="55" height="55"/></span>
    75.                 <span class="xmk_li_05"><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2gcRCeXXXXXbTXXXXXXXXXXXX_!!794977969.jpg" width="392" height="203"/></span>
    76.                 <img src="https://img.alicdn.com/imgextra/i3/794977969/TB2JRtEeXXXXXamXXXXXXXXXXXX_!!794977969.jpg" width="392" height="203" />
    77.             </div>
    78.         </li>
    79.         <li><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2DlVqeXXXXXc1XXXXXXXXXXXX_!!794977969.jpg" width="392" height="203" /></li>
    80.     </ul>
    81.   </div>
    82. </div>
    复制代码




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


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

  • TA的每日心情
    加油
    2016-10-14 10:06
  • 签到天数: 32 天

    连续签到: 1 天

    [LV.5]略有小成

    12

    主题

    78

    帖子

    5926

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    5926

    最佳新人

    QQ
     楼主| 发表于 2016-8-4 08:43:35 | 显示全部楼层

    CSS不仅仅用于店铺京东不需要CSS权限 CSS特效有代码照样可以用

    CSS是可以用在很多地方的不要只想着用于淘宝  知识是多方面的不要只针对某方面用不了而不学习

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


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

    回复 支持 1 反对 0

    使用道具 举报

  • TA的每日心情

    2016-10-8 17:54
  • 签到天数: 378 天

    连续签到: 1 天

    [LV.9]已臻大成

    5

    主题

    175

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    46616

    发表于 2016-7-31 08:20:28 | 显示全部楼层
    然并卵。。。

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


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

    回复 支持 0 反对 1

    使用道具 举报

  • TA的每日心情
    加油
    2016-10-27 15:47
  • 签到天数: 20 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    18

    主题

    710

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    56733

    发表于 2016-7-31 23:41:20 | 显示全部楼层
    然而好多店铺都没开通css
    胆小勿点!★大神群308158281
    回复 支持 0 反对 1

    使用道具 举报

  • TA的每日心情
    大哭
    10 小时前
  • 签到天数: 241 天

    连续签到: 8 天

    [LV.8]自成一派

    19

    主题

    563

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    56866

    发表于 2016-7-30 15:16:59 | 显示全部楼层
    谢谢你~~!!

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


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

  • TA的每日心情
    加油
    2016-10-14 10:06
  • 签到天数: 32 天

    连续签到: 1 天

    [LV.5]略有小成

    12

    主题

    78

    帖子

    5926

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    5926

    最佳新人

    QQ
     楼主| 发表于 2016-7-30 15:21:37 | 显示全部楼层

    这么快

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


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

  • TA的每日心情
    加油
    2016-10-14 10:06
  • 签到天数: 32 天

    连续签到: 1 天

    [LV.5]略有小成

    12

    主题

    78

    帖子

    5926

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    5926

    最佳新人

    QQ
     楼主| 发表于 2016-8-1 09:15:17 | 显示全部楼层
    本帖最后由 xifeng 于 2016-8-1 09:17 编辑
    莱美 发表于 2016-7-31 23:41
    然而好多店铺都没开通css

    没开通CSS又没事 重要的是可以学习代码 不是么  总比自动生成的好可以掌握新的知识


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


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

  • TA的每日心情
    臭美
    2016-1-20 16:15
  • 签到天数: 8 天

    连续签到: 1 天

    [LV.3]武林新秀

    0

    主题

    3

    帖子

    1867

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1867

    发表于 2016-8-3 14:24:30 | 显示全部楼层
    谢谢分享

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


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

  • TA的每日心情

    2016-10-8 17:54
  • 签到天数: 378 天

    连续签到: 1 天

    [LV.9]已臻大成

    5

    主题

    175

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    46616

    发表于 2016-8-4 12:58:17 | 显示全部楼层
    360截图20160804125619286.jpg 懂!!

    360截图20160804125619286.jpg

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


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

  • TA的每日心情
    加油
    2016-10-14 10:06
  • 签到天数: 32 天

    连续签到: 1 天

    [LV.5]略有小成

    12

    主题

    78

    帖子

    5926

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    5926

    最佳新人

    QQ
     楼主| 发表于 2016-8-11 08:44:06 | 显示全部楼层
    淘宝美工 噜噜噜

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-8 14:06 , Processed in 0.175829 second(s), 24 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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