Skip to content

I
icbcRPG
Commit 932cde49 authored by zhangjinzhou's avatar zhangjinzhou
Browse files
Options

选择文件

parent d9fe4d68
Hide whitespace changes
Inline Side-by-side
Showing with 341 additions and 72 deletions
project/src/components/select/select.jsx
View file @ 932cde49
......@@ -10,6 +10,9 @@ class Select extends Component {
super(props);
this.state = {
resList: resList,
nshowidx:2,
changed:false,
selected:false
};
}
......@@ -19,42 +22,128 @@ class Select extends Component {
// this.props.onClose();
// }, 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() {
const {nshowidx,changed,selected} = this.state;
return (
<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
className="select_role1 "
uuid="76f06526-a55d-4f2a-b817-d450126bdf54"
src={this.state.resList['8872d3a6-1d19-4a83-a07d-ae084b8a1392'].url}
/>
<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}
uuid="912dc687-6727-4bb1-9e87-936ea77074ce"
/>
</div>
<div className="cardtwo" uuid="a24b6660-832b-4fd0-94e6-b627f4aefb68">
<div className="cardtwo" uuid="a24b6660-832b-4fd0-94e6-b627f4aefb68" ref="cardtwo">
<img
className="select_role2 "
uuid="cb643df1-dd96-4249-ac24-04136f106467"
src={this.state.resList['61eeafb1-d01e-4f8c-b7a8-5ee9432efb9b'].url}
/>
<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}
uuid="d54f2e03-e401-42a3-8132-8e8138e5c4f9"
/>
</div>
<div className="cardthr" uuid="68b6c97e-82f0-412b-8950-2665aba842fa">
<div className="cardthr" uuid="68b6c97e-82f0-412b-8950-2665aba842fa" ref="cardthr">
<img
className="select_role3 "
uuid="f26ff0c9-78dc-47b8-970b-dfe5a6938464"
src={this.state.resList['9da0a542-17dc-4c4c-bcc3-2ee8fba66ffa'].url}
/>
<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}
uuid="28141b28-0c40-4810-8233-cc392753d698"
/>
......@@ -64,26 +153,33 @@ class Select extends Component {
uuid="b7fef7c6-cc6d-4147-baa2-1b836b23f5cf"
src={this.state.resList['710e2c56-2ed1-4b25-a5c7-787edde76ded'].url}
/>
<img
className="select_btn "
uuid="553dac18-d798-4eeb-a64e-dd850711d44e"
src={this.state.resList['2f3d6f0d-0695-4acf-ae87-4e6743772531'].url}
/>
<img
{selected?<img
className="select_btndisabled "
uuid="b5ffc84d-26e8-4c5a-aa13-b450672682e2"
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
className="select_right "
uuid="c98966a6-06b5-4262-98b9-aca82095b372"
src={this.state.resList['5b40f5cf-2a46-4a68-9a79-40c8179ce379'].url}
onClick={this.changeShowRole.bind(this,"right")}
/>
<img
className="select_left "
uuid="01088a9b-53d1-43f3-b09d-3eabfe156c0f"
src={this.state.resList['a4412ebd-65be-4908-8894-b0aea8cbd4cf'].url}
onClick={this.changeShowRole.bind(this,"left")}
/>
<input className="planame" type="text" placeholder="请输入昵称（不超过六字）" />
</div>
);
}
......
project/src/components/select/select.less
View file @ 932cde49
......@@ -4,92 +4,254 @@
left: 47px;
top: 228px;
position: absolute;
.cardone {
transform-origin: 50% 50%;
width: 535px;
height: 614px;
position: absolute;
left: -420px;
top: 250px;
transform: scale(0.7);
}
.select_role1 {
width: 535px;
height: 614px;
left: 0px;
right: 0px;
.select_role1 {
width: 535px;
height: 614px;
left: 0px;
top: 0px;
position: absolute;
}
.onemask {
width: 523px;
height: 614px;
display: block;
left: 0px;
top: 0px;
position: absolute;
transform-origin: 0px 0px 0px;
}
top: 0px;
position: absolute;
}
.onemask {
width: 523px;
height: 614px;
display: block;
left: 0px;
top: 0px;
position: absolute;
transform-origin: 0px 0px 0px;
}
.cardtwo {
width: 535px;
height: 614px;
transform-origin: 50% 50%;
position: absolute;
left: 146px;
right: 0px;
top: 410px;
.select_role2 {
width: 535px;
height: 614px;
left: 0px;
top: 0px;
position: absolute;
}
.twomask {
width: 523px;
height: 614px;
display: block;
left: 0px;
top: 0px;
position: absolute;
transform-origin: 0px 0px 0px;
}
left: 61px;
top: 250px;
}
.select_role2 {
width: 535px;
height: 614px;
left: 0px;
top: 0px;
position: absolute;
}
.twomask {
width: 523px;
height: 614px;
display: block;
left: 0px;
top: 0px;
position: absolute;
transform-origin: 0px 0px 0px;
}
.cardthr {
width: 535px;
height: 614px;
transform-origin: 50% 50%;
position: absolute;
left: -228px;
right: 0px;
top: 360px;
.select_role3 {
width: 535px;
height: 614px;
left: 0px;
top: 0px;
position: absolute;
}
.thrmask {
width: 523px;
height: 614px;
display: block;
left: 0px;
top: 0px;
position: absolute;
transform-origin: 0px 0px 0px;
}
}
.opacitycur{
left: 540px;
top: 250px;
transform: scale(0.7);
}
.select_role3 {
width: 535px;
height: 614px;
left: 0px;
top: 0px;
position: absolute;
}
.thrmask {
width: 523px;
height: 614px;
display: block;
left: 0px;
top: 0px;
position: absolute;
transform-origin: 0px 0px 0px;
}
.opacitycur {
opacity: 0;
}
.opacitylat{
.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;
}
@keyframes opacurAnilat {
0%{
opacity: 0;
}
100%{
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 {
width: 502px;
height: 998px;
left: 77px;
position: absolute;
}
.select_btn {
width: 446px;
height: 99px;
......@@ -97,6 +259,7 @@
top: 1041px;
position: absolute;
}
.select_btndisabled {
width: 446px;
height: 99px;
......@@ -104,6 +267,15 @@
top: 1041px;
position: absolute;
}
.scrolldiv {
width: 750px;
height: 650px;
position: absolute;
top: 250px;
left: -47px;
}
.select_right {
width: 42px;
height: 97px;
......@@ -111,10 +283,11 @@
top: 491px;
position: absolute;
}
.select_left {
width: 42px;
height: 97px;
top: 491px;
position: absolute;
}
}
}
\ No newline at end of file
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