parent
96461e36a7
commit
fa6f634227
@ -0,0 +1,96 @@ |
|||||||
|
.model_wrap{ |
||||||
|
width: 100%; |
||||||
|
height: 100vh; |
||||||
|
background-color: #000; |
||||||
|
opacity: 0.5; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
display:none; |
||||||
|
z-index:2001; |
||||||
|
} |
||||||
|
.unchoose{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.model-bg{ |
||||||
|
width: 560px; |
||||||
|
position: absolute; |
||||||
|
top: 30%; |
||||||
|
left: 60%; |
||||||
|
color:#fff; |
||||||
|
margin-left: -600px; |
||||||
|
z-index:2002 ; |
||||||
|
} |
||||||
|
.content{ |
||||||
|
font-size:20px; |
||||||
|
} |
||||||
|
.jump{ |
||||||
|
cursor: pointer; |
||||||
|
position:absolute; |
||||||
|
width:80px; |
||||||
|
font-size:16px; |
||||||
|
color:coral; |
||||||
|
padding: 10px 20px; |
||||||
|
border-radius: 40px; |
||||||
|
top:22%; |
||||||
|
left:53%; |
||||||
|
z-index: 2002; |
||||||
|
text-align: center; |
||||||
|
border: 2px solid coral; |
||||||
|
transition: background-color .3s |
||||||
|
} |
||||||
|
.jump:hover{ |
||||||
|
background-color: coral; |
||||||
|
color:#fff; |
||||||
|
} |
||||||
|
.Previous{ |
||||||
|
cursor: pointer; |
||||||
|
width:100px; |
||||||
|
text-align: center; |
||||||
|
font-size:16px; |
||||||
|
color:#1ecd97; |
||||||
|
padding: 10px 20px; |
||||||
|
border-radius: 40px; |
||||||
|
margin-top: 20px; |
||||||
|
border: 2px solid #1ecd97; |
||||||
|
transition: background-color .3s |
||||||
|
} |
||||||
|
.Previous:hover{ |
||||||
|
background-color: #1ecd97; |
||||||
|
color:#fff; |
||||||
|
} |
||||||
|
.nextPage{ |
||||||
|
cursor: pointer; |
||||||
|
width: 100px; |
||||||
|
font-size:16px; |
||||||
|
color:#1ecd97; |
||||||
|
padding: 10px 20px; |
||||||
|
border-radius: 40px; |
||||||
|
text-align: center; |
||||||
|
margin-top:-46px; |
||||||
|
margin-left:150px; |
||||||
|
border: 2px solid #1ecd97; |
||||||
|
transition: background-color .3s |
||||||
|
} |
||||||
|
.nextPage:hover{ |
||||||
|
background-color: #1ecd97; |
||||||
|
color:#fff; |
||||||
|
} |
||||||
|
.point1{ |
||||||
|
width: 525px; |
||||||
|
height:174px; |
||||||
|
background:url("../img/prompt.png") no-repeat center/cover; |
||||||
|
position:absolute; |
||||||
|
left:-548px; |
||||||
|
top:-110px; |
||||||
|
} |
||||||
|
.point2{ |
||||||
|
width: 529px; |
||||||
|
height:170px; |
||||||
|
background:url("../img/prompt3.png") no-repeat center/cover; |
||||||
|
position:absolute; |
||||||
|
left:-548px; |
||||||
|
top:17px; |
||||||
|
} |
||||||
|
.boo{ |
||||||
|
border:2px solid #fff; |
||||||
|
} |
@ -0,0 +1,41 @@ |
|||||||
|
$(function(){ |
||||||
|
var arr=[0,1,3,5,6,7,8,12]; |
||||||
|
$(".prompt").click(function(){ |
||||||
|
$(".model_wrap").show(); |
||||||
|
$(".model-bg").eq(0).removeClass("unchoose"); |
||||||
|
$('.jump').removeClass('unchoose'); |
||||||
|
$('#side-menu .av').eq(arr[0]).click().addClass('boo'); |
||||||
|
}); |
||||||
|
|
||||||
|
$(".model-bg").each(function (i) { |
||||||
|
let _that=$(this); |
||||||
|
_that.find(".nextPage").click(function () { |
||||||
|
console.log(i); |
||||||
|
_that.addClass("unchoose"); |
||||||
|
$(".model-bg").eq(i+1).removeClass("unchoose"); |
||||||
|
$('#side-menu .av').eq(arr[i+1]).addClass('boo'); |
||||||
|
$('#side-menu .av').eq(arr[i]).removeClass('boo'); |
||||||
|
}); |
||||||
|
_that.find(".Previous").click(function () { |
||||||
|
console.log(i); |
||||||
|
_that.addClass("unchoose"); |
||||||
|
$(".model-bg").eq(i-1).removeClass("unchoose"); |
||||||
|
$('#side-menu .av').eq(arr[i-1]).addClass('boo'); |
||||||
|
$('#side-menu .av').eq(arr[i]).removeClass('boo'); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
$(".perfection").click(function () { |
||||||
|
$(".jump").addClass('unchoose'); |
||||||
|
$(".model_wrap").hide(); |
||||||
|
}); |
||||||
|
|
||||||
|
$(".jump").click(function () { |
||||||
|
$(this).addClass('unchoose'); |
||||||
|
$(".model_wrap").hide(); |
||||||
|
$(".model-bg").addClass("unchoose"); |
||||||
|
$("#side-menu .av").each(function (i) { |
||||||
|
console.log(i); |
||||||
|
}) |
||||||
|
}); |
||||||
|
}); |
Loading…
Reference in new issue