javascript 如何在不打开另一个窗口的情况下在屏幕上弹出图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21755585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make an image pop-up on screen without opening another window
提问by Captain BudderChunk
So I have made a simple game where there is a bunch of pictures onscreen and when you click them, you get a point. Here is the code for that:
所以我做了一个简单的游戏，屏幕上有一堆图片，当你点击它们时，你就会得到一分。这是代码：
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
picturesRemoved++;
});
});
</script>
Then I also have this later in the code:
然后我在后面的代码中也有这个：
var picturesRemoved = 0;
and this for the pictures:
这对于图片：
<br><p><img src="test.jpg" border="0" width="1001" height="159"></p>
What I want is so that the pictures will keep popping up on the screen until you click a certain amount of them. The certain amount should be 20. I can use CSS, or JavaScript, or HTML, or jQuery. (Or all.)
我想要的是图片会一直在屏幕上弹出，直到您单击一定数量的图片。一定数量应该是20。我可以使用CSS，或JavaScript，或HTML，或jQuery。（或全部。）
Thanks!
谢谢！
采纳答案by ThermalCube
HTML example:
HTML 示例：
<div class="cut_oak_tree">
<img src="http://www.pbpixels.com/x/images/oak.png" onclick="myFunction(this)" />
<img src="http://www.pbpixels.com/x/images/oak.png" onclick="myFunction(this)" />
<img src="http://www.pbpixels.com/x/images/oak.png" onclick="myFunction(this)" />
</div>
<div id='countervalue'>0</div>
And Javascript:
和 Javascript：
var inter;
$(document).ready(function(){
inter = setInterval(function(){
$('.cut_oak_tree').append('<img src="http://www.pbpixels.com/x/images/oak.png"onclick="myFunction(this)">');
},1000);
});
var counter = 0;
function myFunction(img) {
counter++;
document.getElementById('countervalue').innerHTML = counter;
img.onclick = null;
img.remove();
if(counter === 20){
clearInterval(inter);
}
}
UPDATE
更新
Try this:
试试这个：
回答by Captain BudderChunk
I am not a good javascript programmer, But I know you can use this code to make the element visible or invisible. You can zet the default property of all images to display:none;in css. And for the javascript:
我不是一个好的 javascript 程序员，但我知道您可以使用此代码使元素可见或不可见。您可以将所有图像的默认属性设置为display:none;css。对于 javascript：
Invisible
无形的
document.getElementById(picture").style.display="none";
Visible
可见的
document.getElementById("myP").style.display="inline";
回答by Sheldon Neilson
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function addImage() {
$('body').append('<p class="click-me" onclick="onImageClicked(this)"><img src="test.jpg" border="0" width="1001" height="159"></p>');
}
function onImageClicked(s) {
$(s).remove();
if (++document.picturesRemoved == 20) {
clearInterval(document.myInterval);
}
}
$(document).ready(function () {
document.picturesRemoved = 0;
document.myInterval = setInterval(addImage,1000);
});
</script>
</head>
<body>
</body>
</html>
回答by Minal Raniga
A method to do this is to use an "on mouse over" action in html.
一种方法是在 html 中使用“鼠标悬停”操作。
Within the script tag:
在脚本标签内：
<script>
function large(x)
{
x.style.height = "640px";
x.style.width = "480px";
}
function normal(x)
{
x.style.height = "50px";
x.style.width = "50px";
}
</script>
Within the image tag:
在图像标签内：
<img onmouseover="large(this)" onmouseout="normal(this)" border="0" src="x" alt="x" width="50" height="50">
NB: x = your image name
注意：x = 您的图像名称
回答by ZeCo
//for jquery mobile probably//
//对于jquery mobile可能//
<script type="text/javascript">
$( document ).on( "pagecreate", function() {
$( ".photopopup" ).on({
popupbeforeposition: function() {
var maxHeight = $( window ).height() - 60 + "px";
$( ".photopopup img" ).css( "max-height", maxHeight );
}
});
});
</script>
//after that, in html make a button or link like this//
//之后，在html中制作一个这样的按钮或链接//
<a href="#my_image" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline"><img src="img_folder/my_image.jpg" alt="my image"></a>
//place your image like this//
//像这样放置你的图像//
<div data-role="popup" id="my_image" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
