forked from Open-CT/openct-tasks
commit
f0d75eb03f
|
@ -58,11 +58,14 @@
|
||||||
<script type="text/javascript" src="task.js"></script>
|
<script type="text/javascript" src="task.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window.onload = function(){
|
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
|
let stepIndex = 0
|
||||||
$('body').append(`<div id="guide-box">
|
$('body').append(`<div id="guide-box">
|
||||||
<div class="guide-area">
|
<div class="guide-area">
|
||||||
<div class="guide-tip-box" id="guide-tip">
|
<div class="guide-tip-box" id="guide-tip">
|
||||||
<div class="guide-tip-content">
|
<div class="guide-tip-content">
|
||||||
|
<div class="triangle"></div>
|
||||||
<div class="circle"></div>
|
<div class="circle"></div>
|
||||||
<div class="tip-info">
|
<div class="tip-info">
|
||||||
<span></span>
|
<span></span>
|
||||||
|
@ -73,57 +76,187 @@
|
||||||
</div>
|
</div>
|
||||||
</div>`)
|
</div>`)
|
||||||
let elementList = [{
|
let elementList = [{
|
||||||
target:'#paper > svg > circle:nth-of-type(4)',
|
target:['#displayHelper_validate','#displayHelper_cancel'],
|
||||||
tips:'点击已放入的石子,可以把石子拿出来',
|
tips:'您可以验证答案是否正确或重新开始',
|
||||||
tip_position:{
|
tip_position:{
|
||||||
bottom:'-62px',
|
bottom:'-62px',
|
||||||
left:'-15px',
|
left:'30px',
|
||||||
|
t_left:'30px'
|
||||||
},
|
},
|
||||||
padding:'10px 10px'
|
padding:'10px 0px',
|
||||||
|
level:['easy','medium','hard'],
|
||||||
|
step:{
|
||||||
|
easy:2,
|
||||||
|
medium:2,
|
||||||
|
hard:2
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
},{
|
},{
|
||||||
target:'#paper > svg > circle:nth-of-type(7)',
|
target:'#paper > svg > circle:nth-of-type(4)',
|
||||||
tips:'点击空白圆圈可以放入石子',
|
tips:'点击空白小圆圈,可以把小石子放进去',
|
||||||
padding:'10px 10px',
|
|
||||||
tip_position:{
|
tip_position:{
|
||||||
bottom:'-62px',
|
bottom:'-62px',
|
||||||
left:'-15px',
|
left:'0px',
|
||||||
|
t_left:'30px'
|
||||||
},
|
},
|
||||||
|
padding:'10px 10px',
|
||||||
|
level:['easy'],
|
||||||
|
step:{
|
||||||
|
easy:0,
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
isSVG:true
|
||||||
|
},{
|
||||||
|
target:'#paper > svg > circle:nth-of-type(19)',
|
||||||
|
tips:'点击空白小圆圈,可以把小石子放进去',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'0px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'10px 10px',
|
||||||
|
level:['hard'],
|
||||||
|
step:{
|
||||||
|
hard:0
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
isSVG:true
|
||||||
|
},{
|
||||||
|
target:'#paper > svg > circle:nth-of-type(8)',
|
||||||
|
tips:'点击空白小圆圈,可以把小石子放进去',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'0px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'10px 10px',
|
||||||
|
level:['medium'],
|
||||||
|
step:{
|
||||||
|
medium:0
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
isSVG:true
|
||||||
|
},{
|
||||||
|
target:'#undo',
|
||||||
|
tips:'点击取消,或者点击放有石子的小圆圈可以把小石子取回储备库。',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'-320px',
|
||||||
|
t_left:'360px'
|
||||||
|
},
|
||||||
|
padding:'10px 10px',
|
||||||
|
level:['easy','medium','hard'],
|
||||||
|
step:{
|
||||||
|
easy:1,
|
||||||
|
medium:1,
|
||||||
|
hard:1
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
}]
|
}]
|
||||||
updateGuide(elementList,stepIndex)
|
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',()=>{
|
$('#btn-box').on('click','#next-step-btn',()=>{
|
||||||
stepIndex += 1
|
stepIndex += 1
|
||||||
updateGuide(elementList,stepIndex)
|
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
||||||
})
|
})
|
||||||
$('#btn-box').on('click','#last-step-btn',()=>{
|
$('#btn-box').on('click','#last-step-btn',()=>{
|
||||||
stepIndex -= 1
|
stepIndex -= 1
|
||||||
updateGuide(elementList,stepIndex)
|
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
||||||
})
|
})
|
||||||
$('#btn-box').on('click','#complete-btn',()=>{
|
$('#btn-box').on('click','#complete-btn',()=>{
|
||||||
$('#guide-box').remove()
|
$('#guide-box').remove()
|
||||||
})
|
})
|
||||||
$(window).resize(()=>{
|
$(window).resize(()=>{
|
||||||
updateGuide(elementList,stepIndex)
|
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,stepIndex){
|
function updateGuide(elementList,itemIndex,stepIndex){
|
||||||
$('#guide-box > .guide-area').css('width','40px')
|
let elementItem = elementList[itemIndex]
|
||||||
.css('height','40px')
|
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .triangle').css('left',elementItem.tip_position.t_left)
|
||||||
.css('top',$(elementList[stepIndex].target).offset().top-parseFloat(elementList[stepIndex].padding.split(' ')[0].replace('px'))+'px')
|
$('#guide-box > .guide-area').css('width',getTargetWidth(elementItem.target,elementItem.isSVG)+'px')
|
||||||
.css('left',$(elementList[stepIndex].target).offset().left-parseFloat(elementList[stepIndex].padding.split(' ')[1].replace('px'))+'px')
|
.css('height',getTargetHeight(elementItem.target,elementItem.isSVG)+'px')
|
||||||
.css('border-radius',$(elementList[stepIndex].target).height()+20+'px')
|
.css('top',getTargetTop(elementItem.target,parseFloat(elementItem.padding.split(' ')[0].replace('px')),elementItem.isSVG)+'px')
|
||||||
.css('padding',elementList[stepIndex].padding)
|
.css('left',getTargetLeft(elementItem.target,parseFloat(elementItem.padding.split(' ')[1].replace('px')),elementItem.isSVG)+'px')
|
||||||
|
.css('border-radius',elementItem.borderRadius+'px')
|
||||||
|
.css('padding',elementItem.padding)
|
||||||
|
|
||||||
for(let key in elementList[stepIndex].tip_position){
|
for(let key in elementItem.tip_position){
|
||||||
$('#guide-tip').css(key,elementList[stepIndex].tip_position[key])
|
$('#guide-tip').css(key,elementItem.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 > .tip-info > span').text(elementItem.tips)
|
||||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box').html(`
|
$('#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!=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>':''}
|
${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>':''}
|
${elementList.length-1==stepIndex?'<div id="complete-btn" class="step-btn" style="background-color:#FDF151;border:none;"><span>我知道了!</span></div>':''}
|
||||||
`)
|
`)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getTargetWidth(targetElement,isSVG){
|
||||||
|
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 isSVG?$(targetElement).get(0).getBBox().width:$(targetElement).outerWidth()
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTargetHeight(targetElement,isSVG) {
|
||||||
|
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 isSVG?$(targetElement).get(0).getBBox().height:$(targetElement).outerHeight()
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTargetTop(targetElement,padding,isSVG) {
|
||||||
|
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,isSVG) {
|
||||||
|
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>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
#paper {
|
#paper {
|
||||||
|
@ -171,9 +304,9 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content::before{
|
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .triangle{
|
||||||
content:'';
|
/*content:'';
|
||||||
display: block;
|
display: block;*/
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
|
@ -181,7 +314,7 @@
|
||||||
border-right: 12px solid transparent;
|
border-right: 12px solid transparent;
|
||||||
border-bottom: 12px solid white;
|
border-bottom: 12px solid white;
|
||||||
top: -12px;
|
top: -12px;
|
||||||
left: 30px;
|
/*left: 30px;*/
|
||||||
}
|
}
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
|
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
|
||||||
width: 8px;
|
width: 8px;
|
||||||
|
|
|
@ -58,11 +58,14 @@
|
||||||
<script type="text/javascript" src="task.js"></script>
|
<script type="text/javascript" src="task.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window.onload = function(){
|
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
|
let stepIndex = 0
|
||||||
$('body').append(`<div id="guide-box">
|
$('body').append(`<div id="guide-box">
|
||||||
<div class="guide-area">
|
<div class="guide-area">
|
||||||
<div class="guide-tip-box" id="guide-tip">
|
<div class="guide-tip-box" id="guide-tip">
|
||||||
<div class="guide-tip-content">
|
<div class="guide-tip-content">
|
||||||
|
<div class="triangle"></div>
|
||||||
<div class="circle"></div>
|
<div class="circle"></div>
|
||||||
<div class="tip-info">
|
<div class="tip-info">
|
||||||
<span></span>
|
<span></span>
|
||||||
|
@ -72,60 +75,189 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>`)
|
</div>`)
|
||||||
|
|
||||||
|
|
||||||
let elementList = [{
|
let elementList = [{
|
||||||
target:'#paper > svg > circle:nth-of-type(8)',
|
target:'#paper > svg > circle:nth-of-type(8)',
|
||||||
tips:'点击转动杠杆,改变轨道方向',
|
tips:'点击转动杠杆,改变轨道方向',
|
||||||
tip_position:{
|
tip_position:{
|
||||||
bottom:'-62px',
|
bottom:'-62px',
|
||||||
left:'-15px',
|
left:'30px',
|
||||||
|
t_left:'30px'
|
||||||
},
|
},
|
||||||
size:'24px',
|
|
||||||
padding:'10px 10px',
|
padding:'10px 10px',
|
||||||
|
level:['easy'],
|
||||||
|
step:{
|
||||||
|
easy:0
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
isSVG:true
|
||||||
},{
|
},{
|
||||||
target:'#paper > svg > circle:nth-of-type(5)',
|
target:'#paper > svg > circle:nth-of-type(11)',
|
||||||
tips:'点击单个轮子,使其断开或连接单个轮子',
|
tips:'点击转动杠杆,改变轨道方向',
|
||||||
padding:'10px 20px',
|
|
||||||
tip_position:{
|
tip_position:{
|
||||||
bottom:'-62px',
|
bottom:'-62px',
|
||||||
left:'30px',
|
left:'30px',
|
||||||
|
t_left:'30px'
|
||||||
},
|
},
|
||||||
size:'69px',
|
padding:'10px 10px',
|
||||||
|
level:['medium'],
|
||||||
|
step:{
|
||||||
|
medium:0
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
isSVG:true
|
||||||
|
},{
|
||||||
|
target:'#paper > svg > circle:nth-of-type(23)',
|
||||||
|
tips:'点击转动杠杆,改变轨道方向',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'30px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'10px 10px',
|
||||||
|
level:['hard'],
|
||||||
|
step:{
|
||||||
|
hard:0
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
isSVG:true
|
||||||
|
},{
|
||||||
|
target:'#paper > svg > circle:nth-of-type(5)',
|
||||||
|
tips:'点击单个轮子,使其断开或连接单个轮子',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'30px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'10px 10px',
|
||||||
|
level:['easy','medium'],
|
||||||
|
step:{
|
||||||
|
easy:1,
|
||||||
|
medium:1,
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
isSVG:true
|
||||||
|
},{
|
||||||
|
target:'#paper > svg > circle:nth-of-type(12)',
|
||||||
|
tips:'点击单个轮子,使其断开或连接单个轮子',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'30px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'10px 10px',
|
||||||
|
level:['hard'],
|
||||||
|
step:{
|
||||||
|
hard:1
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
isSVG:true
|
||||||
}]
|
}]
|
||||||
updateGuide(elementList,stepIndex)
|
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',()=>{
|
$('#btn-box').on('click','#next-step-btn',()=>{
|
||||||
stepIndex += 1
|
stepIndex += 1
|
||||||
updateGuide(elementList,stepIndex)
|
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
||||||
})
|
})
|
||||||
$('#btn-box').on('click','#last-step-btn',()=>{
|
$('#btn-box').on('click','#last-step-btn',()=>{
|
||||||
stepIndex -= 1
|
stepIndex -= 1
|
||||||
updateGuide(elementList,stepIndex)
|
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
||||||
})
|
})
|
||||||
$('#btn-box').on('click','#complete-btn',()=>{
|
$('#btn-box').on('click','#complete-btn',()=>{
|
||||||
$('#guide-box').remove()
|
$('#guide-box').remove()
|
||||||
})
|
})
|
||||||
$(window).resize(()=>{
|
$(window).resize(()=>{
|
||||||
updateGuide(elementList,stepIndex)
|
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,stepIndex){
|
function updateGuide(elementList,itemIndex,stepIndex){
|
||||||
$('#guide-box > .guide-area').css('width',elementList[stepIndex].size)
|
let elementItem = elementList[itemIndex]
|
||||||
.css('height',elementList[stepIndex].size)
|
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .triangle').css('left',elementItem.tip_position.t_left)
|
||||||
.css('top',$(elementList[stepIndex].target).offset().top-parseFloat(elementList[stepIndex].padding.split(' ')[0].replace('px'))+'px')
|
$('#guide-box > .guide-area').css('width',getTargetWidth(elementItem.target,elementItem.isSVG)+'px')
|
||||||
.css('left',$(elementList[stepIndex].target).offset().left-parseFloat(elementList[stepIndex].padding.split(' ')[1].replace('px'))+'px')
|
.css('height',getTargetHeight(elementItem.target,elementItem.isSVG)+'px')
|
||||||
.css('border-radius',$(elementList[stepIndex].target).height()+20+'px')
|
.css('top',getTargetTop(elementItem.target,parseFloat(elementItem.padding.split(' ')[0].replace('px')),elementItem.isSVG)+'px')
|
||||||
.css('padding',elementList[stepIndex].padding)
|
.css('left',getTargetLeft(elementItem.target,parseFloat(elementItem.padding.split(' ')[1].replace('px')),elementItem.isSVG)+'px')
|
||||||
|
.css('border-radius',elementItem.borderRadius+'px')
|
||||||
|
.css('padding',elementItem.padding)
|
||||||
|
|
||||||
for(let key in elementList[stepIndex].tip_position){
|
for(let key in elementItem.tip_position){
|
||||||
$('#guide-tip').css(key,elementList[stepIndex].tip_position[key])
|
$('#guide-tip').css(key,elementItem.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 > .tip-info > span').text(elementItem.tips)
|
||||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box').html(`
|
$('#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!=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>':''}
|
${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>':''}
|
${elementList.length-1==stepIndex?'<div id="complete-btn" class="step-btn" style="background-color:#FDF151;border:none;"><span>我知道了!</span></div>':''}
|
||||||
`)
|
`)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getTargetWidth(targetElement,isSVG){
|
||||||
|
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 isSVG?$(targetElement).get(0).getBBox().width:$(targetElement).outerWidth()
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTargetHeight(targetElement,isSVG) {
|
||||||
|
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 isSVG?$(targetElement).get(0).getBBox().height:$(targetElement).outerHeight()
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTargetTop(targetElement,padding,isSVG) {
|
||||||
|
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,isSVG) {
|
||||||
|
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>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
#paper {
|
#paper {
|
||||||
|
@ -168,9 +300,9 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content::before{
|
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .triangle{
|
||||||
content:'';
|
/*content:'';
|
||||||
display: block;
|
display: block;*/
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
|
@ -178,7 +310,7 @@
|
||||||
border-right: 12px solid transparent;
|
border-right: 12px solid transparent;
|
||||||
border-bottom: 12px solid white;
|
border-bottom: 12px solid white;
|
||||||
top: -12px;
|
top: -12px;
|
||||||
left: 30px;
|
/*left: 30px;*/
|
||||||
}
|
}
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
|
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
|
||||||
width: 8px;
|
width: 8px;
|
||||||
|
|
|
@ -53,11 +53,14 @@
|
||||||
<script type="text/javascript" src="task.js"></script>
|
<script type="text/javascript" src="task.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window.onload = function(){
|
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
|
let stepIndex = 0
|
||||||
$('body').append(`<div id="guide-box">
|
$('body').append(`<div id="guide-box">
|
||||||
<div class="guide-area">
|
<div class="guide-area">
|
||||||
<div class="guide-tip-box" id="guide-tip">
|
<div class="guide-tip-box" id="guide-tip">
|
||||||
<div class="guide-tip-content">
|
<div class="guide-tip-content">
|
||||||
|
<div class="triangle"></div>
|
||||||
<div class="circle"></div>
|
<div class="circle"></div>
|
||||||
<div class="tip-info">
|
<div class="tip-info">
|
||||||
<span></span>
|
<span></span>
|
||||||
|
@ -73,51 +76,137 @@
|
||||||
tip_position:{
|
tip_position:{
|
||||||
bottom:'-62px',
|
bottom:'-62px',
|
||||||
left:'30px',
|
left:'30px',
|
||||||
|
t_left:'30px'
|
||||||
},
|
},
|
||||||
padding:'10px 0px'
|
padding:'10px 0px',
|
||||||
|
level:['easy','medium','hard'],
|
||||||
|
step:{
|
||||||
|
easy:1,
|
||||||
|
medium:1,
|
||||||
|
hard:1
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
},{
|
},{
|
||||||
target:'#paper > svg > rect:nth-of-type(17)',
|
target:'#paper > svg > rect:nth-of-type(17)',
|
||||||
tips:'点击形状可以变为不同的形状',
|
tips:'点击形状可以变为不同的形状',
|
||||||
padding:'10px 20px',
|
|
||||||
tip_position:{
|
tip_position:{
|
||||||
bottom:'-62px',
|
bottom:'-62px',
|
||||||
left:'30px',
|
left:'30px',
|
||||||
|
t_left:'30px'
|
||||||
},
|
},
|
||||||
|
padding:'10px 10px',
|
||||||
|
level:['easy','medium','hard'],
|
||||||
|
step:{
|
||||||
|
easy:0,
|
||||||
|
medium:0,
|
||||||
|
hard:0
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
isSVG:true
|
||||||
}]
|
}]
|
||||||
updateGuide(elementList,stepIndex)
|
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',()=>{
|
$('#btn-box').on('click','#next-step-btn',()=>{
|
||||||
stepIndex += 1
|
stepIndex += 1
|
||||||
updateGuide(elementList,stepIndex)
|
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
||||||
})
|
})
|
||||||
$('#btn-box').on('click','#last-step-btn',()=>{
|
$('#btn-box').on('click','#last-step-btn',()=>{
|
||||||
stepIndex -= 1
|
stepIndex -= 1
|
||||||
updateGuide(elementList,stepIndex)
|
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
||||||
})
|
})
|
||||||
$('#btn-box').on('click','#complete-btn',()=>{
|
$('#btn-box').on('click','#complete-btn',()=>{
|
||||||
$('#guide-box').remove()
|
$('#guide-box').remove()
|
||||||
})
|
})
|
||||||
$(window).resize(()=>{
|
$(window).resize(()=>{
|
||||||
updateGuide(elementList,stepIndex)
|
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,stepIndex){
|
function updateGuide(elementList,itemIndex,stepIndex){
|
||||||
$('#guide-box > .guide-area').css('width',$(elementList[stepIndex].target).width()+'px')
|
let elementItem = elementList[itemIndex]
|
||||||
.css('height',$(elementList[stepIndex].target).height()+'px')
|
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .triangle').css('left',elementItem.tip_position.t_left)
|
||||||
.css('top',$(elementList[stepIndex].target).offset().top-parseFloat(elementList[stepIndex].padding.split(' ')[0].replace('px'))+'px')
|
$('#guide-box > .guide-area').css('width',getTargetWidth(elementItem.target,elementItem.isSVG)+'px')
|
||||||
.css('left',$(elementList[stepIndex].target).offset().left-parseFloat(elementList[stepIndex].padding.split(' ')[1].replace('px'))+'px')
|
.css('height',getTargetHeight(elementItem.target,elementItem.isSVG)+'px')
|
||||||
.css('border-radius',$(elementList[stepIndex].target).height()+20+'px')
|
.css('top',getTargetTop(elementItem.target,parseFloat(elementItem.padding.split(' ')[0].replace('px')),elementItem.isSVG)+'px')
|
||||||
.css('padding',elementList[stepIndex].padding)
|
.css('left',getTargetLeft(elementItem.target,parseFloat(elementItem.padding.split(' ')[1].replace('px')),elementItem.isSVG)+'px')
|
||||||
|
.css('border-radius',elementItem.borderRadius+'px')
|
||||||
|
.css('padding',elementItem.padding)
|
||||||
|
|
||||||
for(let key in elementList[stepIndex].tip_position){
|
for(let key in elementItem.tip_position){
|
||||||
$('#guide-tip').css(key,elementList[stepIndex].tip_position[key])
|
$('#guide-tip').css(key,elementItem.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 > .tip-info > span').text(elementItem.tips)
|
||||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box').html(`
|
$('#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!=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>':''}
|
${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>':''}
|
${elementList.length-1==stepIndex?'<div id="complete-btn" class="step-btn" style="background-color:#FDF151;border:none;"><span>我知道了!</span></div>':''}
|
||||||
`)
|
`)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTargetWidth(targetElement,isSVG){
|
||||||
|
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 isSVG?$(targetElement).get(0).getBBox().width:$(targetElement).outerWidth()
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTargetHeight(targetElement,isSVG) {
|
||||||
|
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 isSVG?$(targetElement).get(0).getBBox().height:$(targetElement).outerHeight()
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTargetTop(targetElement,padding,isSVG) {
|
||||||
|
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,isSVG) {
|
||||||
|
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>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
|
@ -158,9 +247,9 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content::before{
|
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .triangle{
|
||||||
content:'';
|
/*content:'';
|
||||||
display: block;
|
display: block;*/
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
|
@ -168,7 +257,7 @@
|
||||||
border-right: 12px solid transparent;
|
border-right: 12px solid transparent;
|
||||||
border-bottom: 12px solid white;
|
border-bottom: 12px solid white;
|
||||||
top: -12px;
|
top: -12px;
|
||||||
left: 30px;
|
/*left: 30px;*/
|
||||||
}
|
}
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
|
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
|
||||||
width: 8px;
|
width: 8px;
|
||||||
|
|
Loading…
Reference in New Issue