如何在点击时弹出图像?
How to make an image popup on click?
所以我的增量已经取得了长足的进步,我在这里得到了制作原始弹出窗口的帮助并且效果很好,现在我真的想让弹出窗口成为图像吗?
到目前为止我有:
$("#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 而不是调用 "clone" 调用 div...
我在正确的轨道上吗?
我想从 Cookie Clicker 获得的示例 - http://orteil.dashnet.org/cookieclicker/
到目前为止我的游戏 - retiredgamers.net/
jsfiddle - http://jsfiddle.net/edznycyy/6/
可能有很多方法可以做到这一点。为了让事情尽可能接近你现在所拥有的,这就是我要做的......基本上只是创建 2 个元素,第一个是你的数字,第二个是图像,确保数字在图像上方使用 css的z-index
,然后将它们串联起来制作动画:
这是一个working 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();
});
});
如果您不想自己动手,您可以使用一个 jquery 插件来轻松完成。我敢肯定还有很多,
这是我找到的!
Here is the demo page for full-screan popup plugin
....
<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>
Example is from here and you can download the plugin from here and a list that contains many more
所以我的增量已经取得了长足的进步,我在这里得到了制作原始弹出窗口的帮助并且效果很好,现在我真的想让弹出窗口成为图像吗?
到目前为止我有:
$("#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 而不是调用 "clone" 调用 div...
我在正确的轨道上吗?
我想从 Cookie Clicker 获得的示例 - http://orteil.dashnet.org/cookieclicker/
到目前为止我的游戏 - retiredgamers.net/
jsfiddle - http://jsfiddle.net/edznycyy/6/
可能有很多方法可以做到这一点。为了让事情尽可能接近你现在所拥有的,这就是我要做的......基本上只是创建 2 个元素,第一个是你的数字,第二个是图像,确保数字在图像上方使用 css的z-index
,然后将它们串联起来制作动画:
这是一个working 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();
});
});
如果您不想自己动手,您可以使用一个 jquery 插件来轻松完成。我敢肯定还有很多,
这是我找到的!
Here is the demo page for full-screan popup plugin
....
<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>
Example is from here and you can download the plugin from here and a list that contains many more