Question

所以我做了一个简单的游戏，屏幕上有一堆图片，当你点击它们时，你得到了一个观点。这是代码：

<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
    picturesRemoved++;
  });
});
</script>

然后我在代码中也有了这个：

var picturesRemoved = 0;

这是图片：

<br><p><img src="test.jpg" border="0" width="1001" height="159"></p>

我想要的是这样的图片会一直弹出屏幕，直到你点击一定数量的图片。一定数量应为20.我可以使用CSS，或JavaScript，或HTML或jQuery。（或者全部。）

谢谢！

Answer 1

我不是一个优秀的javascript程序员，但我知道你可以使用这段代码使元素可见或不可见。您可以在css中将所有图像的默认属性设置为display:none;。对于javascript：

隐形

document.getElementById(picture").style.display="none";

可见

document.getElementById("myP").style.display="inline";

Answer 2

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>

和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);
    }
}

更新

试试这个：

http://jsfiddle.net/nd2w3/2/

Answer 3

<!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>

Answer 4

//对于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>

//之后，在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>

//像这样放置你的图像//

<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>

Answer 5

执行此操作的方法是在html中使用“on mouse over”操作。

在脚本标记内：

<script>
function large(x) 
{
    x.style.height = "640px";
    x.style.width = "480px";
}

function normal(x) 
{
    x.style.height = "50px";
    x.style.width = "50px";
}
</script>

在图片标记内：

<img onmouseover="large(this)" onmouseout="normal(this)" border="0" src="x" alt="x" width="50" height="50">

注意：x =您的图片名称

如何在不打开另一个窗口的情况下在屏幕上弹出图像

5 个答案:

隐形

可见

更新