多层移动弹起分类代码特效 | 墨兮风电商博客 — 做专业的电商个人博客

收集分享
电商最优秀的资源


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

以下代码需开通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>

兮风QQ:2802813994。微信号:jiyaoshijue(或扫右边二维码)如有疑问欢迎加我谈论。

图片是样例,内容可以自行替换也可以达到效果。如果觉得本文好也可以发转发给身边的朋友分享。



大家如果想学习哪家店铺的代码可以在下面留言 我会在店铺装修专栏里不定时为大家分解讲解代码的使用。

* 代码版权归原创者所有,本文仅用作参考,本论坛不承担任何责任。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<style type="text/css">
.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}

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

.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}

.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}
.tman_201507_fenlei .fenlei07_dmk .fenlei07_dmk_qd:hover .fenlei07_dmk_qd_b{ opacity:1;}

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

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

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

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

.tman_201507_fenlei .fenlei07_xmk ul li .fenlei07_xmk_li{ width:392px; height:203px; overflow:hidden; position:relative}
.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}
.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}
.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}
.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}
.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}

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

</style>



<div class="tman_201507_fenlei">
  <div class="fenlei07_dmk">
        <div class="fenlei07_dmk_qd">
            <span class="fenlei07_dmk_qd_b"><img src="https://img.alicdn.com/imgextra/i3/794977969/TB2We0peXXXXXcNXXXXXXXXXXXX_!!794977969.jpg" width="600" height="314" /></span>
            <img src="https://img.alicdn.com/imgextra/i4/794977969/TB2MatteXXXXXbMXXXXXXXXXXXX_!!794977969.jpg" width="600" height="314" />          
        </div>
       
        <div class="fenlei07_dmk_zp">
            <span class="fenlei07_dmk_zp_b"><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2OAFaeXXXXXc6XpXXXXXXXXXX_!!794977969.jpg" width="600" height="314" /></span>
            <img src="https://img.alicdn.com/imgextra/i3/794977969/TB2Pg8peXXXXXcMXXXXXXXXXXXX_!!794977969.jpg" width="600" height="314" />        
      </div>    
  </div>
 
  <div class="fenlei07_xmk">
    <ul>
        <li><img src="https://img.alicdn.com/imgextra/i1/794977969/TB2tO0oeXXXXXXnXpXXXXXXXXXX_!!794977969.jpg" width="392" height="203" /></li>
        <li>
            <div class="fenlei07_xmk_li">
                <span class="xmk_li_01"><img src="https://img.alicdn.com/imgextra/i3/794977969/TB2vE8oeXXXXXcKXXXXXXXXXXXX_!!794977969.png" width="170" height="20"/></span>
                <span class="xmk_li_02"><img src="https://img.alicdn.com/imgextra/i2/794977969/TB2xz8AeXXXXXXVXXXXXXXXXXXX_!!794977969.png" width="195" height="40"/></span>
                <span class="xmk_li_03"><img src="https://img.alicdn.com/imgextra/i1/794977969/TB2M1NheXXXXXaoXpXXXXXXXXXX_!!794977969.png" width="195" height="30"/></span>
                <span class="xmk_li_04"><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2DlRxeXXXXXaMXXXXXXXXXXXX_!!794977969.png" width="55" height="55"/></span>
                <span class="xmk_li_05"><img src="https://img.alicdn.com/imgextra/i1/794977969/TB21pRueXXXXXbFXXXXXXXXXXXX_!!794977969.jpg" width="392" height="203"/></span>
                <img src="https://img.alicdn.com/imgextra/i2/794977969/TB2F.FveXXXXXbmXXXXXXXXXXXX_!!794977969.jpg" width="392" height="203" />
            </div>
        </li>
        <li>
            <div class="fenlei07_xmk_li">
                <span class="xmk_li_01"><img src="https://img.alicdn.com/imgextra/i1/794977969/TB2TAXseXXXXXaRXpXXXXXXXXXX_!!794977969.png" width="170" height="20"/></span>
                <span class="xmk_li_02"><img src="https://img.alicdn.com/imgextra/i1/794977969/TB2iklAeXXXXXcHXXXXXXXXXXXX_!!794977969.png" width="195" height="40"/></span>
                <span class="xmk_li_03"><img src="https://img.alicdn.com/imgextra/i1/794977969/TB2M1NheXXXXXaoXpXXXXXXXXXX_!!794977969.png" width="195" height="30"/></span>
                <span class="xmk_li_04"><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2DlRxeXXXXXaMXXXXXXXXXXXX_!!794977969.png" width="55" height="55"/></span>
                <span class="xmk_li_05"><img src="https://img.alicdn.com/imgextra/i3/794977969/TB2txNFeXXXXXbXXXXXXXXXXXXX_!!794977969.jpg" width="392" height="203"/></span>
                <img src="https://img.alicdn.com/imgextra/i4/794977969/TB24aBseXXXXXa.XpXXXXXXXXXX_!!794977969.jpg" width="392" height="203" />
            </div>
        </li>
        <li>
            <div class="fenlei07_xmk_li">
                <span class="xmk_li_01"><img src="https://img.alicdn.com/imgextra/i2/794977969/TB2E0dCeXXXXXccXXXXXXXXXXXX_!!794977969.png" width="170" height="20"/></span>
                <span class="xmk_li_02"><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2cK0GeXXXXXaSXXXXXXXXXXXX_!!794977969.png" width="195" height="40"/></span>
                <span class="xmk_li_03"><img src="https://img.alicdn.com/imgextra/i1/794977969/TB2M1NheXXXXXaoXpXXXXXXXXXX_!!794977969.png" width="195" height="30"/></span>
                <span class="xmk_li_04"><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2DlRxeXXXXXaMXXXXXXXXXXXX_!!794977969.png" width="55" height="55"/></span>
                <span class="xmk_li_05"><img src="https://img.alicdn.com/imgextra/i1/794977969/TB2oHRzeXXXXXc7XXXXXXXXXXXX_!!794977969.jpg" width="392" height="203"/></span>
                <img src="https://img.alicdn.com/imgextra/i2/794977969/TB213RDeXXXXXagXXXXXXXXXXXX_!!794977969.jpg" width="392" height="203" />
            </div>
        </li>
        <li>
            <div class="fenlei07_xmk_li">
                <span class="xmk_li_01"><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2YX4HeXXXXXaKXXXXXXXXXXXX_!!794977969.png" width="170" height="20"/></span>
                <span class="xmk_li_02"><img src="https://img.alicdn.com/imgextra/i3/794977969/TB2NuRteXXXXXaVXpXXXXXXXXXX_!!794977969.png" width="195" height="40"/></span>
                <span class="xmk_li_03"><img src="https://img.alicdn.com/imgextra/i1/794977969/TB2M1NheXXXXXaoXpXXXXXXXXXX_!!794977969.png" width="195" height="30"/></span>
                <span class="xmk_li_04"><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2DlRxeXXXXXaMXXXXXXXXXXXX_!!794977969.png" width="55" height="55"/></span>
                <span class="xmk_li_05"><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2gcRCeXXXXXbTXXXXXXXXXXXX_!!794977969.jpg" width="392" height="203"/></span>
                <img src="https://img.alicdn.com/imgextra/i3/794977969/TB2JRtEeXXXXXamXXXXXXXXXXXX_!!794977969.jpg" width="392" height="203" />
            </div>
        </li>
        <li><img src="https://img.alicdn.com/imgextra/i4/794977969/TB2DlVqeXXXXXc1XXXXXXXXXXXX_!!794977969.jpg" width="392" height="203" /></li>
    </ul>
  </div>
</div>

本章转自互联网,如有冒犯请联系版主修正 兮风电商博客 » 多层移动弹起分类代码特效




喜欢 16

一条回应:“多层移动弹起分类代码特效”

  1. 没有人@你说道:

    抱大腿啊啊啊啊 兮风~~~

发表评论

电子邮件地址不会被公开。 必填项已用*标注

最新文章

  • 去评论
  • 去顶部