Skip to content

Commit b4eacea

Browse files
zhiqiang21zhiqiang21
committed
add css file prefix
1 parent 13ce9e1 commit b4eacea

File tree

5 files changed

+55
-18
lines changed

5 files changed

+55
-18
lines changed

‎3dTransform/css/index.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
*{margin:0;padding:0;}
2+
3+
.top{
4+
5+
}
6+
7+
.bottom{
8+
width:100px;
9+
height:80px;
10+
border:2px solid #000;
11+
-webkit-transform:rotatez(180deg);
12+
transform:rotatez(180deg);
13+
}
14+
15+
16+
@keyframes threeTransform {
17+
18+
}

‎3dTransform/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<link rel="stylesheet" href="./css/index.css">
7+
</head>
8+
<body>
9+
<div class="top"></div>
10+
<div class="bottom"></div>
11+
</body>
12+
</html>

‎NetOrListShow/css/index.css

+14-11
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,16 @@ li {
1515
}
1616

1717
.change-btn{
18-
font-size:0;
18+
font-size:0;
1919
}
2020
.net-btn,
2121
.list-btn {
2222
width:100px;
23-
height:100px;
24-
line-height:100px;
25-
text-align:center;
26-
font-size:20px;
27-
display:inline-block;
23+
height:100px;
24+
line-height:100px;
25+
text-align:center;
26+
font-size:20px;
27+
display:inline-block;
2828
background-color: #c12bf9;
2929
}
3030

@@ -57,18 +57,21 @@ ul >li:nth-child(4),ul >li:nth-child(8) {
5757

5858

5959
.trans-odd{
60-
width:50%;
61-
transition: width ease-in .4s;
60+
width:50%;
61+
transition: width ease-in .4s;
6262
}
6363

6464
.trans-even {
65-
transform: translate3d(100%, 0, 0);
65+
-webkit-transform: translate3d(100%, 0, 0);
66+
transform: translate3d(100%, 0, 0);
6667
width: 50%;
68+
transition: -webkit-transform ease-in .5s;
6769
transition: transform ease-in .5s;
70+
transition: transform ease-in .5s, -webkit-transform ease-in .5s;
6871
}
6972

7073

7174
.top-move{
72-
margin-top:-100px;
73-
transition:margin-top ease-in .5s;
75+
margin-top:-100px;
76+
transition:margin-top ease-in .5s;
7477
}

‎NetOrListShow/js/transform.js

+10-6
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
(function($) {
33
var BlockTransform = function(temp) {
44

5+
56
var _this = this;
67
var oddArray = [],
78
evenArray = [],
@@ -20,16 +21,16 @@
2021
this.evenArray = $(evenArray);
2122

2223
//Bind Event Function
23-
$('.change-btn').on('click', '.net-btn', function(){
24-
$('.list-btn').attr('hit',true);
25-
_this.netCallBack.call(_this);
24+
$('.change-btn').on('click', '.net-btn', function() {
25+
$('.list-btn').attr('hit', true);
26+
_this.netCallBack.call(_this);
2627
});
2728
$('.change-btn').on('click', '.list-btn', function() {
2829
var clickBtn = $(this),
2930
isNotClick = clickBtn.attr('hit');
30-
if(true.toString()===isNotClick){
31-
_this.listCallBack.call(_this);
32-
clickBtn.attr('hit',false);
31+
if (true.toString() === isNotClick) {
32+
_this.listCallBack.call(_this);
33+
clickBtn.attr('hit', false);
3334
}
3435
});
3536
}
@@ -64,6 +65,9 @@
6465
$('.item-list').removeClass('trans-odd').removeClass('trans-even').removeClass('top-move').removeAttr('style');
6566

6667
}, 1100);
68+
},
69+
destoryFunc: function() {
70+
$('.change-btn').off();
6771
}
6872
}
6973

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272

7373
**[点击查看说明文档](https://github.com/zhiqiang21/WebComponent/tree/master/JsNameSpaceManage/README.md)**
7474

75-
#### **NetOrListShow(仿app store 商品网状列表动态切换插件)**
75+
#### **7.NetOrListShow(仿app store 商品网状列表动态切换插件)**
7676

7777
**Gif 截图导致动画有些丢帧，请下载源码运行查看**
7878

0 commit comments

Comments
 (0)