如何在點擊時彈出圖片？

Question

所以我的增量功能已經走了很長一段路，我在這里得到了幫助來制作原始彈出窗口，並且效果很好，現在我真的想將彈出窗口變成圖像嗎？

到目前為止，我有：

$("#coffeeButton").click(function(e) {
    var obj = $("#clone").clone();
    $("body").append(obj);
    obj.html("+"+ cookRate);
    coffee += cookRate;
    totalCoffee += cookRate;
    document.getElementById("coffee").innerHTML = prettify(coffee);
    document.getElementById("totalCoffee").innerHTML = prettify(totalCoffee);

    obj.css('position','absolute');
    obj.offset({left: e.pageX-10, top: e.pageY-25});

    obj.animate({"top": "-=80px"}, 1000, "linear", function() {
        $(this).remove();
    });     
});

而且效果很好，並給了我一個彈出窗口，但是我怎么把它變成圖像呢？

我嘗試創建一個div，將圖像放在該div中，而不是在div上調用“克隆”調用...

我在正確的軌道上嗎？

我想從Cookie Clicker獲得的示例-http: //orteil.dashnet.org/cookieclicker/

到目前為止，我的游戲-retiredgamers.net/

jsfiddle- http://jsfiddle.net/edznycyy/6/

Answer 1

您可能有很多方法可以做到這一點。 為了使事情盡可能地接近您現在擁有的，這就是我要做的...基本上只需創建2個元素，第一個是您的數字，第二個是圖像，請使用css的z-index確保數字在圖像上方，然后同時對它們進行動畫處理：

這是一個工作的jsfiddle

HTML更改：

<img title = "" id="myImg" src="http://blog.beautyfix.com/wp-content/uploads/2012/09/Coffee_iStock_000006160362Medium.jpg" style="display:none" width="30" height="30"> 

JavaScript更改：

$("#coffeeButton").click(function(e) {

    var obj = $("#clone").clone(); //im guessing you chose to use clone here to make it easier to work with the object, so I did the same for the image
    var img = $("#myImg").clone(); 

    $("body").append(obj);
    $("body").append(img);

    obj.html("+"+ cookRate);
    coffee += cookRate;
    totalCoffee += cookRate;
    document.getElementById("coffee").innerHTML = prettify(coffee);
    document.getElementById("totalCoffee").innerHTML = prettify(totalCoffee);

    obj.css('position','absolute'); 
    obj.css('z-index', '2');
    img.css('position','absolute');
    img.show();

    obj.offset({left: e.pageX-10, top: e.pageY-25});
    img.offset({left: e.pageX-10, top: e.pageY-25});

    obj.animate({"top": "-=80px"}, 1000, "linear", function() {
        $(this).remove();
    }); 
    img.animate({"top": "-=80px"}, 1000, "linear", function() {
        $(this).remove();
    });

});

Answer 2

如果您不想自己動手，可以使用一個jQuery插件，它很容易做到。 我相信里面還有很多

這是我發現的！

這是全屏彈出插件的演示頁面

....
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.fullscreen-popup.js"></script>
....

<a class="open-popup" href="#popup">Open popup</a>

...

<div id="popup" style="display: none; width: 640px">
  ...
</div>

<script>

    $(function() {
      $(".open-popup").fullScreenPopup({
        // Options
      });
    });

</script>

示例來自此處 ， 您可以 從此處 下載插件，以及包含更多內容的列表