Question

我需要将text.json解析为我的jquery.animation（）。

我想实现同样的事情achieved here，但是使用像他们在这个例子中使用的“数据”属性，我想使用＆＃34; ID＆＃34;来解析文本。 property作为每个按钮的键值，因此它将文本显示在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;
}

Jquery的：

// 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.",
        }
    }
}

Answer 1

尝试这样的事情：

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

    })

将text.json解析为jquery.animation？

1 个答案: