Commit 932cde49 authored by zhangjinzhou's avatar zhangjinzhou

选择文件

parent d9fe4d68
...@@ -10,6 +10,9 @@ class Select extends Component { ...@@ -10,6 +10,9 @@ class Select extends Component {
super(props); super(props);
this.state = { this.state = {
resList: resList, resList: resList,
nshowidx:2,
changed:false,
selected:false
}; };
} }
...@@ -19,42 +22,128 @@ class Select extends Component { ...@@ -19,42 +22,128 @@ class Select extends Component {
// this.props.onClose(); // this.props.onClose();
// }, 1000); // }, 1000);
} }
cantouch = false;
lastouchx;
touchSolve(e) {
let touchtype = e.type;
let screenx = e.nativeEvent.changedTouches[0].screenX;
if (touchtype == "touchstart") {
this.cantouch = true;
this.lastouchx = screenx;
} else if (touchtype == "touchmove") {
if (this.cantouch) {
if (screenx - this.lastouchx > 10) {
this.cantouch = false;
this.changeShowRole("right");
} else if (screenx - this.lastouchx < -10) {
this.cantouch = false;
this.changeShowRole("left");
}
this.lastouchx = screenx;
}
} else if (touchtype == "touchend") {
}
}
nshowidx = 2;
changeShowRole(dir){
let changenum = dir=="left"?-1:1;
let nshowidx = this.nshowidx + changenum;
this.nshowidx = this.changeIdxShow(nshowidx,this.refs.cardtwo,"onemaskadd");
let lshowidx = this.nshowidx-1;
let tshowidx = this.nshowidx+1;
this.changeIdxShow(lshowidx,this.refs.cardone,"twomaskadd");
this.changeIdxShow(tshowidx,this.refs.cardthr,"thrmaskadd");
this.setState({
nshowidx:this.nshowidx,
changed:true,
});
}
changeIdxShow(showidx,target,maskadd){
if(showidx==4){
showidx = 1;
}
if(showidx==0){
showidx = 3;
}
// let maskcard = target.getElementsByTagName("img")[1];
let srcClass = target.className;
let showclass = ['cardone','cardtwo','cardthr'][showidx-1];
let aniclass = '';
if(showclass=="cardone"){
if(srcClass.indexOf("cardtwo")!=-1){
aniclass = "twoAnione";
}else{
aniclass = "thrAnione";
}
}
else if(showclass=="cardtwo"){
if(srcClass.indexOf("cardone")!=-1){
aniclass = "oneAnitwo";
}else{
aniclass = "thrAnitwo";
}
}
else if(showclass=="cardthr"){
if(srcClass.indexOf("cardone")!=-1){
aniclass = "oneAnithr";
}else{
aniclass = "twoAnithr";
}
}
target.className = showclass+" "+aniclass;
// if(srcClass=="cardtwo"){
// if(maskadd=="onemaskadd"){
// }
// }else if(showclass=="cardtwo"){
// }
return showidx;
}
render() { render() {
const {nshowidx,changed,selected} = this.state;
return ( return (
<div className="select " uuid="298ea3b7-efbb-42ac-adea-ee68aa1db627"> <div className="select " uuid="298ea3b7-efbb-42ac-adea-ee68aa1db627">
<div className="cardone" uuid="36334c7a-26df-4f9e-83d3-6ac81e49d6db"> <div className="cardone" uuid="36334c7a-26df-4f9e-83d3-6ac81e49d6db" ref="cardone">
<img <img
className="select_role1 " className="select_role1 "
uuid="76f06526-a55d-4f2a-b817-d450126bdf54" uuid="76f06526-a55d-4f2a-b817-d450126bdf54"
src={this.state.resList['8872d3a6-1d19-4a83-a07d-ae084b8a1392'].url} src={this.state.resList['8872d3a6-1d19-4a83-a07d-ae084b8a1392'].url}
/> />
<img <img
className="onemask opacitylat" className={"onemask "+(nshowidx==3?"opacitycur":"opacitylat")+(changed?nshowidx==3?" opalatocur":" opacurtolat":"")}
src={this.state.resList['5608e852-913b-47e0-a286-0c33a86aed10'].url} src={this.state.resList['5608e852-913b-47e0-a286-0c33a86aed10'].url}
uuid="912dc687-6727-4bb1-9e87-936ea77074ce" uuid="912dc687-6727-4bb1-9e87-936ea77074ce"
/> />
</div> </div>
<div className="cardtwo" uuid="a24b6660-832b-4fd0-94e6-b627f4aefb68"> <div className="cardtwo" uuid="a24b6660-832b-4fd0-94e6-b627f4aefb68" ref="cardtwo">
<img <img
className="select_role2 " className="select_role2 "
uuid="cb643df1-dd96-4249-ac24-04136f106467" uuid="cb643df1-dd96-4249-ac24-04136f106467"
src={this.state.resList['61eeafb1-d01e-4f8c-b7a8-5ee9432efb9b'].url} src={this.state.resList['61eeafb1-d01e-4f8c-b7a8-5ee9432efb9b'].url}
/> />
<img <img
className="twomask opacitylat" className={"twomask "+(nshowidx==2?"opacitycur":"opacitylat")+(changed?nshowidx==2?" opalatocur":" opacurtolat":"")}
src={this.state.resList['5608e852-913b-47e0-a286-0c33a86aed10'].url} src={this.state.resList['5608e852-913b-47e0-a286-0c33a86aed10'].url}
uuid="d54f2e03-e401-42a3-8132-8e8138e5c4f9" uuid="d54f2e03-e401-42a3-8132-8e8138e5c4f9"
/> />
</div> </div>
<div className="cardthr" uuid="68b6c97e-82f0-412b-8950-2665aba842fa"> <div className="cardthr" uuid="68b6c97e-82f0-412b-8950-2665aba842fa" ref="cardthr">
<img <img
className="select_role3 " className="select_role3 "
uuid="f26ff0c9-78dc-47b8-970b-dfe5a6938464" uuid="f26ff0c9-78dc-47b8-970b-dfe5a6938464"
src={this.state.resList['9da0a542-17dc-4c4c-bcc3-2ee8fba66ffa'].url} src={this.state.resList['9da0a542-17dc-4c4c-bcc3-2ee8fba66ffa'].url}
/> />
<img <img
className="thrmask opacitylat" className={"thrmask "+(nshowidx==1?"opacitycur":"opacitylat")+(changed?nshowidx==1?" opalatocur":" opacurtolat":"")}
src={this.state.resList['5608e852-913b-47e0-a286-0c33a86aed10'].url} src={this.state.resList['5608e852-913b-47e0-a286-0c33a86aed10'].url}
uuid="28141b28-0c40-4810-8233-cc392753d698" uuid="28141b28-0c40-4810-8233-cc392753d698"
/> />
...@@ -64,26 +153,33 @@ class Select extends Component { ...@@ -64,26 +153,33 @@ class Select extends Component {
uuid="b7fef7c6-cc6d-4147-baa2-1b836b23f5cf" uuid="b7fef7c6-cc6d-4147-baa2-1b836b23f5cf"
src={this.state.resList['710e2c56-2ed1-4b25-a5c7-787edde76ded'].url} src={this.state.resList['710e2c56-2ed1-4b25-a5c7-787edde76ded'].url}
/> />
<img {selected?<img
className="select_btn "
uuid="553dac18-d798-4eeb-a64e-dd850711d44e"
src={this.state.resList['2f3d6f0d-0695-4acf-ae87-4e6743772531'].url}
/>
<img
className="select_btndisabled " className="select_btndisabled "
uuid="b5ffc84d-26e8-4c5a-aa13-b450672682e2" uuid="b5ffc84d-26e8-4c5a-aa13-b450672682e2"
src={this.state.resList['fa7ec292-bf36-4ca1-bf04-2e2360176044'].url} src={this.state.resList['fa7ec292-bf36-4ca1-bf04-2e2360176044'].url}
/> />:<img
className="select_btn "
uuid="553dac18-d798-4eeb-a64e-dd850711d44e"
src={this.state.resList['2f3d6f0d-0695-4acf-ae87-4e6743772531'].url}
/>}
<div className="scrolldiv" onTouchStart={this.touchSolve.bind(this)} onTouchMove={this.touchSolve.bind(this)} onTouchEnd={this.touchSolve.bind(this)} >
</div>
<img <img
className="select_right " className="select_right "
uuid="c98966a6-06b5-4262-98b9-aca82095b372" uuid="c98966a6-06b5-4262-98b9-aca82095b372"
src={this.state.resList['5b40f5cf-2a46-4a68-9a79-40c8179ce379'].url} src={this.state.resList['5b40f5cf-2a46-4a68-9a79-40c8179ce379'].url}
onClick={this.changeShowRole.bind(this,"right")}
/> />
<img <img
className="select_left " className="select_left "
uuid="01088a9b-53d1-43f3-b09d-3eabfe156c0f" uuid="01088a9b-53d1-43f3-b09d-3eabfe156c0f"
src={this.state.resList['a4412ebd-65be-4908-8894-b0aea8cbd4cf'].url} src={this.state.resList['a4412ebd-65be-4908-8894-b0aea8cbd4cf'].url}
onClick={this.changeShowRole.bind(this,"left")}
/> />
<input className="planame" type="text" placeholder="请输入昵称(不超过六字)" />
</div> </div>
); );
} }
......
...@@ -4,13 +4,17 @@ ...@@ -4,13 +4,17 @@
left: 47px; left: 47px;
top: 228px; top: 228px;
position: absolute; position: absolute;
.cardone { .cardone {
transform-origin: 50% 50%; transform-origin: 50% 50%;
width: 535px; width: 535px;
height: 614px; height: 614px;
position: absolute; position: absolute;
left: 0px; left: -420px;
right: 0px; top: 250px;
transform: scale(0.7);
}
.select_role1 { .select_role1 {
width: 535px; width: 535px;
height: 614px; height: 614px;
...@@ -18,6 +22,7 @@ ...@@ -18,6 +22,7 @@
top: 0px; top: 0px;
position: absolute; position: absolute;
} }
.onemask { .onemask {
width: 523px; width: 523px;
height: 614px; height: 614px;
...@@ -27,15 +32,17 @@ ...@@ -27,15 +32,17 @@
position: absolute; position: absolute;
transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px;
} }
}
.cardtwo { .cardtwo {
width: 535px; width: 535px;
height: 614px; height: 614px;
transform-origin: 50% 50%; transform-origin: 50% 50%;
position: absolute; position: absolute;
left: 146px; left: 61px;
right: 0px; top: 250px;
top: 410px; }
.select_role2 { .select_role2 {
width: 535px; width: 535px;
height: 614px; height: 614px;
...@@ -43,6 +50,7 @@ ...@@ -43,6 +50,7 @@
top: 0px; top: 0px;
position: absolute; position: absolute;
} }
.twomask { .twomask {
width: 523px; width: 523px;
height: 614px; height: 614px;
...@@ -52,15 +60,17 @@ ...@@ -52,15 +60,17 @@
position: absolute; position: absolute;
transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px;
} }
}
.cardthr { .cardthr {
width: 535px; width: 535px;
height: 614px; height: 614px;
transform-origin: 50% 50%; transform-origin: 50% 50%;
position: absolute; position: absolute;
left: -228px; left: 540px;
right: 0px; top: 250px;
top: 360px; transform: scale(0.7);
}
.select_role3 { .select_role3 {
width: 535px; width: 535px;
height: 614px; height: 614px;
...@@ -68,6 +78,7 @@ ...@@ -68,6 +78,7 @@
top: 0px; top: 0px;
position: absolute; position: absolute;
} }
.thrmask { .thrmask {
width: 523px; width: 523px;
height: 614px; height: 614px;
...@@ -77,19 +88,170 @@ ...@@ -77,19 +88,170 @@
position: absolute; position: absolute;
transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px;
} }
.opacitycur {
opacity: 0;
}
.opacitylat {
opacity: 0.6;
}
.opalatocur{
animation: opalatAnicur 0.5 ease 0s 1 normal;
}
.opacurtolat{
animation: opacurAnilat 0.5 ease 0s 1 normal;
}
.planame{
width: 405px;
height: 63px;
position: absolute;
top:930px;
left: 125px;
appearance: none;
font-size: 28px;
border-radius: 100px;
border: 1px solid #c8cccf;
color: #6a6f77;
outline: 0;
margin: auto;
text-align: center;
outline: 0;
padding: 0 10px;
text-decoration: none;
} }
.opacitycur{
@keyframes opacurAnilat {
0%{
opacity: 0; opacity: 0;
} }
.opacitylat{ 100%{
opacity: 0.6; opacity: 0.6;
} }
}
@keyframes opalatAnicur {
0%{
opacity: 0.6;
}
100%{
opacity: 0;
}
}
.oneAnitwo {
animation: oneanitwo 0.5s ease 0s 1 normal;
}
.twoAnithr {
animation: twoanithr 0.5s ease 0s 1 normal;
}
.thrAnione {
animation: thranione 0.5s ease 0s 1 normal;
}
.thrAnitwo {
animation: thranitwo 0.5s ease 0s 1 normal;
}
.twoAnione {
animation: twoanione 0.5s ease 0s 1 normal;
}
.oneAnithr {
animation: oneanithr 0.5s ease 0s 1 normal;
}
@keyframes oneanitwo {
0% {
left: -420px;
top: 250px;
transform: scale(0.7);
}
100% {
left: 61px;
top: 250px;
transform: scale(1);
}
}
@keyframes twoanithr {
0% {
left: 61px;
top: 250px;
transform: scale(1);
}
100% {
left: 540px;
top: 250px;
transform: scale(0.7);
}
}
@keyframes thranione {
0%{
left: 540px;
}
53%{
left: 620px;
}
53.1%{
left: -490px;
}
100%{
left: -420px;
}
}
@keyframes twoanione {
0% {
left: 61px;
top: 250px;
transform: scale(1);
}
100% {
left: -420px;
top: 250px;
transform: scale(0.7);
}
}
@keyframes thranitwo {
0% {
left: 540px;
top: 250px;
transform: scale(0.7);
}
100% {
left: 61px;
top: 250px;
transform: scale(1);
}
}
@keyframes oneanithr {
0%{
left: -420px;
}
47%{
left: -490px;
}
47.1%{
left: 620px;
}
100%{
left: 540px;
}
}
.select_bg { .select_bg {
width: 502px; width: 502px;
height: 998px; height: 998px;
left: 77px; left: 77px;
position: absolute; position: absolute;
} }
.select_btn { .select_btn {
width: 446px; width: 446px;
height: 99px; height: 99px;
...@@ -97,6 +259,7 @@ ...@@ -97,6 +259,7 @@
top: 1041px; top: 1041px;
position: absolute; position: absolute;
} }
.select_btndisabled { .select_btndisabled {
width: 446px; width: 446px;
height: 99px; height: 99px;
...@@ -104,6 +267,15 @@ ...@@ -104,6 +267,15 @@
top: 1041px; top: 1041px;
position: absolute; position: absolute;
} }
.scrolldiv {
width: 750px;
height: 650px;
position: absolute;
top: 250px;
left: -47px;
}
.select_right { .select_right {
width: 42px; width: 42px;
height: 97px; height: 97px;
...@@ -111,6 +283,7 @@ ...@@ -111,6 +283,7 @@
top: 491px; top: 491px;
position: absolute; position: absolute;
} }
.select_left { .select_left {
width: 42px; width: 42px;
height: 97px; height: 97px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment