我需要将 text.json 解析为我的 jquery.animation()。
我想实现同样的事情achieved here ，但不像他们在这个例子中使用的那样使用“数据”属性，我想使用“ID”属性作为每个按钮的键值来解析文本，以便它将文本显示到 middleBubble 中。我的和这个例子唯一不同的是我的气泡是切换的，所以文本需要在动画之后显示。
我无法将它包装到代码中，因此我可以将它混入我的 jquery.animation() 中，这个咏叹调对我来说是新的。有人能帮我吗 对此进行编码，以便我了解其工作原理。
为动画挖掘 HTML:
<section class='circle-animation'>
<div class="container-fluid">
<div class="row">
<div class="hidden-xs hidden-sm">
<div class="col-sm-6 col-sm-offset-3 col-sm-pull-1">
<div id="middlepapir" class="jumbotron">
<div class="row">
<img id="placeholder" class="papir img-responsive" src="img/circle/11.png" alt="">
<div class="row">
<div id="all" class="move1 col-sm-4 col-xs-4 col-md-push-4">
<a href="#"><img class="position1 round" src="img/circle/off/home-all-icon-off.png"></a>
</div>
</div>
<div class="row">
<div id="cover" class="move2 col-sm-4 col-xs-4 col-md-push-1">
<a href="#"><img class="position2 round" src="img/circle/off/home-cover-icon-off.png"></a>
</div>
</div>
<div class="row">
<div id="design" class="move3 col-sm-4 col-xs-4 col-md-push-7">
<a href="#"><img class="position3 round" src="img/circle/off/home-design-icon-off.png"></a>
</div>
</div>
<div class="row">
<div id="diy" class="move4 col-sm-4 col-xs-4">
<a href="#"><img class="position4 round" src="img/circle/off/home-diy-icon-off.png"></a>
</div>
</div>
<div class="row">
<div id="marketing" class="move5 col-sm-4 col-xs-4 col-md-push-8">
<a href="#"><img class="position5 round" src="img/circle/off/home-marketing-icon-off.png"></a>
</div>
</div>
<div class="row">
<div id="other" class="move6 col-sm-4 col-xs-4 col-md-push-1">
<a href="#"><img class="position6 round" src="img/circle/off/home-other-icon-off.png"></a>
</div>
</div>
<div class="row">
<div id="special" class="move7 col-sm-4 col-xs-4 col-md-push-4">
<a href="#"><img class="position7 round" src="img/circle/off/home-special-icon-off.png"></a>
</div>
</div>
<div class="row">
<div id="vip" class="move8 col-sm-4 col-xs-4 col-md-push-7">
<a href="#"><img class="position8 round" src="img/circle/off/home-vip-icon-off.png"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
为动画挖掘 CSS:
/**
*
* Position icons into circle (SO)
*
*/
/* -------Up------ */
.move1 {
}
.move2 {
margin-top: -80px;
}
.move3 {
margin-top: -140px;
}
/* --------------- */
/* ------Middle---- */
.move5 {
margin-top: -140px;
}
/* ---------------- */
/* ------Down------ */
.move7 {
margin-top: -80px;
}
.move8 {
margin-top: -195px;
}
/* --------------- */
.round {
width: 140px;
height: 140px;
}
.jumbotron {
display: inline-block;
width: 700px;
height: 600px;
}
.jumbotron img.img-responsive {
width: 450px;
position: absolute;
margin-top: 120px;
margin-left: 60px;
}
J查询:
// jQuery script for are Circle div whit Scroll Reveal Script
$(document).ready(function(){
/*==========================================
SCROLL REVEL SCRIPTS
=====================================================*/
window.scrollReveal = new scrollReveal();
/*==========================================
WRITE YOUR SCRIPTS BELOW
=====================================================*/
$('.round').click(function(){
$('.papir').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
});
});
});
text.json 我想解析成我的 html:
var a = {
"all":{
"id":"all",
"data": {
"datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
}
}, "cover": {
"id":"cover",
"data": {
"datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
}
}, "diy": {
"id":"diy",
"data": {
"datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
}
}, "marketing": {
"id": "marketing",
"data": {
"datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
}
}, "other": {
"id": "other",
"data": {
"datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
}
}, "special": {
"id": "special",
"data": {
"datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
}
}, "vip": {
"id": "vip",
"data": {
"datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
}
}, "design": {
"id": "design",
"data": {
"datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
}
}
}
最佳答案
尝试这样的事情:
var a = {
"all":{
"id":"all",
"data": {
"datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
}
}, "cover": {
"id":"cover",
"data": {
"datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
}
}, "diy": {
"id":"diy",
"data": {
"datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
}
}, "marketing": {
"id": "marketing",
"data": {
"datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
}
}, "other": {
"id": "other",
"data": {
"datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
}
}, "special": {
"id": "special",
"data": {
"datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
}
}, "vip": {
"id": "vip",
"data": {
"datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
}
}, "design": {
"id": "design",
"data": {
"datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
}
}
}
$('div[class^="move"]').on('mouseover',function(){
var id = $(this).attr('id');
alert(a[id].data.datatext)
$('.main-view').text(a[id].data.datatext);//.main-view is the text body where you display it
})
关于javascript - 将 text.json 解析为 jquery.animation？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30317217/