forked from Open-CT/openct-tasks
'stacker为四个任务增加步骤引导'
This commit is contained in:
stacker
parent
0056ad5026
commit
22e3f2fe0a
|
|
@ -56,6 +56,75 @@
|
|||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="task.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.onload = function(){
|
||||
let stepIndex = 0
|
||||
$('body').append(`<div id="guide-box">
|
||||
<div class="guide-area">
|
||||
<div class="guide-tip-box" id="guide-tip">
|
||||
<div class="guide-tip-content">
|
||||
<div class="circle"></div>
|
||||
<div class="tip-info">
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="button-box" id="btn-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`)
|
||||
let elementList = [{
|
||||
target:'#paper > svg > circle:nth-of-type(4)',
|
||||
tips:'点击已放入的石子，可以把石子拿出来',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'-15px',
|
||||
},
|
||||
padding:'10px 10px'
|
||||
},{
|
||||
target:'#paper > svg > circle:nth-of-type(7)',
|
||||
tips:'点击空白圆圈可以放入石子',
|
||||
padding:'10px 10px',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'-15px',
|
||||
},
|
||||
}]
|
||||
updateGuide(elementList,stepIndex)
|
||||
$('#btn-box').on('click','#next-step-btn',()=>{
|
||||
stepIndex += 1
|
||||
updateGuide(elementList,stepIndex)
|
||||
})
|
||||
$('#btn-box').on('click','#last-step-btn',()=>{
|
||||
stepIndex -= 1
|
||||
updateGuide(elementList,stepIndex)
|
||||
})
|
||||
$('#btn-box').on('click','#complete-btn',()=>{
|
||||
$('#guide-box').remove()
|
||||
})
|
||||
$(window).resize(()=>{
|
||||
updateGuide(elementList,stepIndex)
|
||||
})
|
||||
}
|
||||
function updateGuide(elementList,stepIndex){
|
||||
$('#guide-box > .guide-area').css('width','40px')
|
||||
.css('height','40px')
|
||||
.css('top',$(elementList[stepIndex].target).offset().top-parseFloat(elementList[stepIndex].padding.split(' ')[0].replace('px'))+'px')
|
||||
.css('left',$(elementList[stepIndex].target).offset().left-parseFloat(elementList[stepIndex].padding.split(' ')[1].replace('px'))+'px')
|
||||
.css('border-radius',$(elementList[stepIndex].target).height()+20+'px')
|
||||
.css('padding',elementList[stepIndex].padding)
|
||||
|
||||
for(let key in elementList[stepIndex].tip_position){
|
||||
$('#guide-tip').css(key,elementList[stepIndex].tip_position[key])
|
||||
}
|
||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span').text(elementList[stepIndex].tips)
|
||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box').html(`
|
||||
${stepIndex!=0?'<div id="last-step-btn" class="step-btn"><span>上一步</span></div>':''}
|
||||
${stepIndex!=elementList.length-1?'<div id="next-step-btn" class="step-btn"><span>下一步</span></div>':''}
|
||||
${elementList.length-1==stepIndex?'<div id="complete-btn" class="step-btn" style="background-color:#FDF151;border:none;"><span>我知道了！</span></div>':''}
|
||||
`)
|
||||
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#paper {
|
||||
margin: 1em auto;
|
||||
|
|
@ -71,6 +140,86 @@
|
|||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
#guide-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 998;
|
||||
}
|
||||
#guide-box > .guide-area{
|
||||
box-shadow: 1px 1px 100000px 100000px rgb(124 152 209 / 50%);
|
||||
position: fixed;
|
||||
transition: all 500ms;
|
||||
/* padding: 10px 0px; */
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box{
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
bottom:-60px;
|
||||
left: 60px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content{
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content::before{
|
||||
content:'';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 12px solid transparent;
|
||||
border-right: 12px solid transparent;
|
||||
border-bottom: 12px solid white;
|
||||
top: -12px;
|
||||
left: 30px;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: #FDF151;
|
||||
margin: 14px 10px 14px 0px;
|
||||
float: left;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info{
|
||||
height: 100%;
|
||||
line-height: 36px;
|
||||
display: inline-block;
|
||||
white-space:nowrap;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span{
|
||||
font-size: 14px;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space:nowrap;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn{
|
||||
padding: 0px 8px;
|
||||
height: 24px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 5px 0px;
|
||||
border-radius: 6px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn > span{
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -55,6 +55,214 @@
|
|||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="task.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.onload = function(){
|
||||
let levelHash = window.location.hash?window.location.hash.replace('#',''):'easy'
|
||||
let level = ['easy','medium','hard'].includes(levelHash)?levelHash:'easy'
|
||||
let stepIndex = 0
|
||||
$('body').append(`<div id="guide-box">
|
||||
<div class="guide-area">
|
||||
<div class="guide-tip-box" id="guide-tip">
|
||||
<div class="guide-tip-content">
|
||||
<div class="circle"></div>
|
||||
<div class="tip-info">
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="button-box" id="btn-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`)
|
||||
let elementList = [{
|
||||
target:'#displayHelper_validate',
|
||||
tips:'点击“试一试”来验证你的想法，不限次数~',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'30px',
|
||||
},
|
||||
padding:'10px 0px',
|
||||
level:['easy'],
|
||||
step:{
|
||||
easy:2,
|
||||
},
|
||||
borderRadius:16
|
||||
},{
|
||||
target:'#nbStamps_select',
|
||||
tips:'点击选择邮票数量',
|
||||
padding:'10px 20px',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'30px',
|
||||
},
|
||||
level:['easy','medium','hard'],
|
||||
step:{
|
||||
easy:0,
|
||||
medium:1,
|
||||
hard:1
|
||||
},
|
||||
borderRadius:16
|
||||
},{
|
||||
target:'#stampsPaper > svg',
|
||||
tips:'点击改变每张邮票颜色',
|
||||
padding:'10px 10px',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'30px',
|
||||
},
|
||||
level:['easy','medium','hard'],
|
||||
step:{
|
||||
easy:1,
|
||||
medium:2,
|
||||
hard:2
|
||||
},
|
||||
borderRadius:16
|
||||
},{
|
||||
target:['#paper > svg > rect:nth-of-type(1)','#paper > svg > rect:nth-of-type(2)'],
|
||||
tips:'点击滚筒，可以选中其中的一个，再去修改它的参数。',
|
||||
padding:'10px 10px',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'30px',
|
||||
},
|
||||
level:['medium','hard'],
|
||||
step:{
|
||||
medium:0,
|
||||
hard:0
|
||||
},
|
||||
borderRadius:16
|
||||
},{
|
||||
target:'#parameters > tbody > tr:nth-of-type(3)',
|
||||
tips:'点击选择当前选中的滚筒滚动的起始和终止位置',
|
||||
padding:'10px 10px',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'30px',
|
||||
},
|
||||
level:['medium','hard'],
|
||||
step:{
|
||||
medium:3,
|
||||
hard:3
|
||||
},
|
||||
borderRadius:16
|
||||
},{
|
||||
target:['#displayHelper_validate','#displayHelper_cancel'],
|
||||
tips:'当你设置好每个滚筒的参数之后，可以点击“试一试”验证你的答案，也可以重新开始。',
|
||||
padding:'10px 10px',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'30px',
|
||||
},
|
||||
level:['medium','hard'],
|
||||
step:{
|
||||
medium:4,
|
||||
hard:4
|
||||
},
|
||||
borderRadius:16
|
||||
}]
|
||||
elementList = elementList.filter(item=>item.level.includes(level))
|
||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
||||
$('#btn-box').on('click','#next-step-btn',()=>{
|
||||
stepIndex += 1
|
||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
||||
})
|
||||
$('#btn-box').on('click','#last-step-btn',()=>{
|
||||
stepIndex -= 1
|
||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
||||
})
|
||||
$('#btn-box').on('click','#complete-btn',()=>{
|
||||
$('#guide-box').remove()
|
||||
})
|
||||
$(window).resize(()=>{
|
||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
||||
})
|
||||
$(document).scroll(()=>{
|
||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
||||
})
|
||||
}
|
||||
function updateGuide(elementList,itemIndex,stepIndex){
|
||||
let elementItem = elementList[itemIndex]
|
||||
$('#guide-box > .guide-area').css('width',getTargetWidth(elementItem.target)+'px')
|
||||
.css('height',getTargetHeight(elementItem.target)+'px')
|
||||
.css('top',getTargetTop(elementItem.target,parseFloat(elementItem.padding.split(' ')[0].replace('px')))+'px')
|
||||
.css('left',getTargetLeft(elementItem.target,parseFloat(elementItem.padding.split(' ')[1].replace('px')))+'px')
|
||||
.css('border-radius',elementItem.borderRadius+'px')
|
||||
.css('padding',elementItem.padding)
|
||||
|
||||
for(let key in elementItem.tip_position){
|
||||
$('#guide-tip').css(key,elementItem.tip_position[key])
|
||||
}
|
||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span').text(elementItem.tips)
|
||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box').html(`
|
||||
${stepIndex!=0?'<div id="last-step-btn" class="step-btn"><span>上一步</span></div>':''}
|
||||
${stepIndex!=elementList.length-1?'<div id="next-step-btn" class="step-btn"><span>下一步</span></div>':''}
|
||||
${elementList.length-1==stepIndex?'<div id="complete-btn" class="step-btn" style="background-color:#FDF151;border:none;"><span>我知道了！</span></div>':''}
|
||||
`)
|
||||
|
||||
}
|
||||
|
||||
function getTargetWidth(targetElement){
|
||||
if(typeof targetElement == 'object'){
|
||||
let value = 0;
|
||||
let leftValue = [2000,0]
|
||||
for(let elementItem of targetElement){
|
||||
let elementLeft = $(elementItem).offset().left
|
||||
if(elementLeft<leftValue[0]){
|
||||
leftValue[0] = elementLeft
|
||||
}
|
||||
|
||||
if(elementLeft>leftValue[1]){
|
||||
leftValue[1] = elementLeft
|
||||
value = 0
|
||||
value += $(elementItem).width()
|
||||
}
|
||||
}
|
||||
return value + leftValue[1] - leftValue[0]
|
||||
}
|
||||
return $(targetElement).width()
|
||||
}
|
||||
|
||||
function getTargetHeight(targetElement) {
|
||||
if(typeof targetElement == 'object'){
|
||||
let value = 0;
|
||||
let topValue = [2000,0]
|
||||
for(let elementItem of targetElement){
|
||||
let elementTop = $(elementItem).offset().top
|
||||
if(elementTop<topValue[0]){
|
||||
topValue[0] = elementTop
|
||||
}
|
||||
|
||||
if(elementTop>topValue[1]){
|
||||
topValue[1] = elementTop
|
||||
value = 0
|
||||
value += $(elementItem).height()
|
||||
}
|
||||
}
|
||||
return value + topValue[1] - topValue[0]
|
||||
}
|
||||
return $(targetElement).height()
|
||||
}
|
||||
|
||||
function getTargetTop(targetElement,padding) {
|
||||
if(typeof targetElement == 'object'){
|
||||
let value = 2000
|
||||
for(let elementItem of targetElement){
|
||||
value = $(elementItem).offset().top<value?$(elementItem).offset().top:value
|
||||
}
|
||||
return value - padding - $(document).scrollTop()
|
||||
}
|
||||
return $(targetElement).offset().top - padding - $(document).scrollTop()
|
||||
}
|
||||
function getTargetLeft(targetElement,padding) {
|
||||
if(typeof targetElement == 'object'){
|
||||
let value = 2000
|
||||
for(let elementItem of targetElement){
|
||||
value = $(elementItem).offset().left<value?$(elementItem).offset().left:value
|
||||
}
|
||||
return value - padding
|
||||
}
|
||||
return $(targetElement).offset().left - padding
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#parameters {
|
||||
margin: 1em auto 0 auto;
|
||||
|
|
@ -85,6 +293,86 @@
|
|||
width: 4em;
|
||||
height: 2em;
|
||||
}
|
||||
#guide-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 998;
|
||||
}
|
||||
#guide-box > .guide-area{
|
||||
box-shadow: 1px 1px 100000px 100000px rgb(124 152 209 / 50%);
|
||||
position:absolute;
|
||||
transition: all 500ms;
|
||||
/* padding: 10px 0px; */
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box{
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
bottom:-60px;
|
||||
left: 60px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content{
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content::before{
|
||||
content:'';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 12px solid transparent;
|
||||
border-right: 12px solid transparent;
|
||||
border-bottom: 12px solid white;
|
||||
top: -12px;
|
||||
left: 30px;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: #FDF151;
|
||||
margin: 14px 10px 14px 0px;
|
||||
float: left;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info{
|
||||
height: 100%;
|
||||
line-height: 36px;
|
||||
display: inline-block;
|
||||
white-space:nowrap;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span{
|
||||
font-size: 14px;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space:nowrap;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn{
|
||||
padding: 0px 8px;
|
||||
height: 24px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 5px 0px;
|
||||
border-radius: 6px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn > span{
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -56,6 +56,77 @@
|
|||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="task.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.onload = function(){
|
||||
let stepIndex = 0
|
||||
$('body').append(`<div id="guide-box">
|
||||
<div class="guide-area">
|
||||
<div class="guide-tip-box" id="guide-tip">
|
||||
<div class="guide-tip-content">
|
||||
<div class="circle"></div>
|
||||
<div class="tip-info">
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="button-box" id="btn-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`)
|
||||
let elementList = [{
|
||||
target:'#paper > svg > circle:nth-of-type(8)',
|
||||
tips:'点击转动杠杆，改变轨道方向',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'-15px',
|
||||
},
|
||||
size:'24px',
|
||||
padding:'10px 10px',
|
||||
},{
|
||||
target:'#paper > svg > circle:nth-of-type(5)',
|
||||
tips:'点击单个轮子，使其断开或连接单个轮子',
|
||||
padding:'10px 20px',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'30px',
|
||||
},
|
||||
size:'69px',
|
||||
}]
|
||||
updateGuide(elementList,stepIndex)
|
||||
$('#btn-box').on('click','#next-step-btn',()=>{
|
||||
stepIndex += 1
|
||||
updateGuide(elementList,stepIndex)
|
||||
})
|
||||
$('#btn-box').on('click','#last-step-btn',()=>{
|
||||
stepIndex -= 1
|
||||
updateGuide(elementList,stepIndex)
|
||||
})
|
||||
$('#btn-box').on('click','#complete-btn',()=>{
|
||||
$('#guide-box').remove()
|
||||
})
|
||||
$(window).resize(()=>{
|
||||
updateGuide(elementList,stepIndex)
|
||||
})
|
||||
}
|
||||
function updateGuide(elementList,stepIndex){
|
||||
$('#guide-box > .guide-area').css('width',elementList[stepIndex].size)
|
||||
.css('height',elementList[stepIndex].size)
|
||||
.css('top',$(elementList[stepIndex].target).offset().top-parseFloat(elementList[stepIndex].padding.split(' ')[0].replace('px'))+'px')
|
||||
.css('left',$(elementList[stepIndex].target).offset().left-parseFloat(elementList[stepIndex].padding.split(' ')[1].replace('px'))+'px')
|
||||
.css('border-radius',$(elementList[stepIndex].target).height()+20+'px')
|
||||
.css('padding',elementList[stepIndex].padding)
|
||||
|
||||
for(let key in elementList[stepIndex].tip_position){
|
||||
$('#guide-tip').css(key,elementList[stepIndex].tip_position[key])
|
||||
}
|
||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span').text(elementList[stepIndex].tips)
|
||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box').html(`
|
||||
${stepIndex!=0?'<div id="last-step-btn" class="step-btn"><span>上一步</span></div>':''}
|
||||
${stepIndex!=elementList.length-1?'<div id="next-step-btn" class="step-btn"><span>下一步</span></div>':''}
|
||||
${elementList.length-1==stepIndex?'<div id="complete-btn" class="step-btn" style="background-color:#FDF151;border:none;"><span>我知道了！</span></div>':''}
|
||||
`)
|
||||
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#paper {
|
||||
margin-top: 1em;
|
||||
|
|
@ -66,6 +137,86 @@
|
|||
.actions-descr li {
|
||||
margin-top: 1em;
|
||||
}
|
||||
#guide-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 998;
|
||||
}
|
||||
#guide-box > .guide-area{
|
||||
box-shadow: 1px 1px 100000px 100000px rgb(124 152 209 / 50%);
|
||||
position: fixed;
|
||||
transition: all 500ms;
|
||||
/* padding: 10px 0px; */
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box{
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
bottom:-60px;
|
||||
left: 60px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content{
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content::before{
|
||||
content:'';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 12px solid transparent;
|
||||
border-right: 12px solid transparent;
|
||||
border-bottom: 12px solid white;
|
||||
top: -12px;
|
||||
left: 30px;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: #FDF151;
|
||||
margin: 14px 10px 14px 0px;
|
||||
float: left;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info{
|
||||
height: 100%;
|
||||
line-height: 36px;
|
||||
display: inline-block;
|
||||
white-space:nowrap;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span{
|
||||
font-size: 14px;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space:nowrap;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn{
|
||||
padding: 0px 8px;
|
||||
height: 24px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 5px 0px;
|
||||
border-radius: 6px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn > span{
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -51,6 +51,75 @@
|
|||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="task.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.onload = function(){
|
||||
let stepIndex = 0
|
||||
$('body').append(`<div id="guide-box">
|
||||
<div class="guide-area">
|
||||
<div class="guide-tip-box" id="guide-tip">
|
||||
<div class="guide-tip-content">
|
||||
<div class="circle"></div>
|
||||
<div class="tip-info">
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="button-box" id="btn-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`)
|
||||
let elementList = [{
|
||||
target:'#displayHelper_validate',
|
||||
tips:'点击“试一试”来验证你的想法，不限次数~',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'30px',
|
||||
},
|
||||
padding:'10px 0px'
|
||||
},{
|
||||
target:'#paper > svg > rect:nth-of-type(17)',
|
||||
tips:'点击形状可以变为不同的形状',
|
||||
padding:'10px 20px',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'30px',
|
||||
},
|
||||
}]
|
||||
updateGuide(elementList,stepIndex)
|
||||
$('#btn-box').on('click','#next-step-btn',()=>{
|
||||
stepIndex += 1
|
||||
updateGuide(elementList,stepIndex)
|
||||
})
|
||||
$('#btn-box').on('click','#last-step-btn',()=>{
|
||||
stepIndex -= 1
|
||||
updateGuide(elementList,stepIndex)
|
||||
})
|
||||
$('#btn-box').on('click','#complete-btn',()=>{
|
||||
$('#guide-box').remove()
|
||||
})
|
||||
$(window).resize(()=>{
|
||||
updateGuide(elementList,stepIndex)
|
||||
})
|
||||
}
|
||||
function updateGuide(elementList,stepIndex){
|
||||
$('#guide-box > .guide-area').css('width',$(elementList[stepIndex].target).width()+'px')
|
||||
.css('height',$(elementList[stepIndex].target).height()+'px')
|
||||
.css('top',$(elementList[stepIndex].target).offset().top-parseFloat(elementList[stepIndex].padding.split(' ')[0].replace('px'))+'px')
|
||||
.css('left',$(elementList[stepIndex].target).offset().left-parseFloat(elementList[stepIndex].padding.split(' ')[1].replace('px'))+'px')
|
||||
.css('border-radius',$(elementList[stepIndex].target).height()+20+'px')
|
||||
.css('padding',elementList[stepIndex].padding)
|
||||
|
||||
for(let key in elementList[stepIndex].tip_position){
|
||||
$('#guide-tip').css(key,elementList[stepIndex].tip_position[key])
|
||||
}
|
||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span').text(elementList[stepIndex].tips)
|
||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box').html(`
|
||||
${stepIndex!=0?'<div id="last-step-btn" class="step-btn"><span>上一步</span></div>':''}
|
||||
${stepIndex!=elementList.length-1?'<div id="next-step-btn" class="step-btn"><span>下一步</span></div>':''}
|
||||
${elementList.length-1==stepIndex?'<div id="complete-btn" class="step-btn" style="background-color:#FDF151;border:none;"><span>我知道了！</span></div>':''}
|
||||
`)
|
||||
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#paper {
|
||||
margin-top: 1em;
|
||||
|
|
@ -58,7 +127,86 @@
|
|||
#error {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#guide-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 998;
|
||||
}
|
||||
#guide-box > .guide-area{
|
||||
box-shadow: 1px 1px 100000px 100000px rgb(124 152 209 / 50%);
|
||||
position: fixed;
|
||||
transition: all 500ms;
|
||||
/* padding: 10px 0px; */
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box{
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
bottom:-60px;
|
||||
left: 60px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content{
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content::before{
|
||||
content:'';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 12px solid transparent;
|
||||
border-right: 12px solid transparent;
|
||||
border-bottom: 12px solid white;
|
||||
top: -12px;
|
||||
left: 30px;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: #FDF151;
|
||||
margin: 14px 10px 14px 0px;
|
||||
float: left;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info{
|
||||
height: 100%;
|
||||
line-height: 36px;
|
||||
display: inline-block;
|
||||
white-space:nowrap;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span{
|
||||
font-size: 14px;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space:nowrap;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn{
|
||||
padding: 0px 8px;
|
||||
height: 24px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 5px 0px;
|
||||
border-radius: 6px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn > span{
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue