admin管理员组文章数量:1316323
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.)
Thanks!
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.)
Thanks!
Share Improve this question asked Feb 13, 2014 at 13:25 Captain BudderChunkCaptain BudderChunk 251 gold badge1 silver badge6 bronze badges 7- so if someone click at 20 pictures, the pictures would be removed? – GoE Commented Feb 13, 2014 at 13:28
- no. They would just stop popping up. – Captain BudderChunk Commented Feb 13, 2014 at 13:29
- Your current code hides the image. – Ruben Commented Feb 13, 2014 at 13:29
- Yeah. I know. I want it to hide the image when you click on it. But then more pop up. – Captain BudderChunk Commented Feb 13, 2014 at 13:31
- popping up like a kind of lightbox? – GoE Commented Feb 13, 2014 at 13:32
5 Answers
Reset to default 1HTML example:
<div class="cut_oak_tree">
<img src="http://www.pbpixels./x/images/oak.png" onclick="myFunction(this)" />
<img src="http://www.pbpixels./x/images/oak.png" onclick="myFunction(this)" />
<img src="http://www.pbpixels./x/images/oak.png" onclick="myFunction(this)" />
</div>
<div id='countervalue'>0</div>
And Javascript:
var inter;
$(document).ready(function(){
inter = setInterval(function(){
$('.cut_oak_tree').append('<img src="http://www.pbpixels./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:
http://jsfiddle/nd2w3/2/
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:
Invisible
document.getElementById(picture").style.display="none";
Visible
document.getElementById("myP").style.display="inline";
<!DOCTYPE html>
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="//code.jquery./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>
//for jquery mobile probably//
<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//
<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>
A method to do this is to use an "on mouse over" action in 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
本文标签: javascriptHow to make an image popup on screen without opening another windowStack Overflow
版权声明:本文标题:javascript - How to make an image pop-up on screen without opening another window - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742003916a2411573.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论