0

我制作了一个脚本，将图像的数字序列从目录加载到 html 页面上的网格中。

我使用 js/jquery 来执行此操作，它在 Firefox 和 safari 中运行良好，但不会在 chrome 中加载图像。

<!DOCTYPE html>

<meta charset="UTF-8">
<HTML>

<head>


<style>
body{
    margin:0;
}
div.gL{
    padding:8px;
    width:1008px;
    margin: 0 auto;
    background-color:white;
    height:1%;
    overflow:hidden;
}

div.gL ul li{
    width:320px;
    height:230px;
    margin:8px;
    padding:0;
    float:left;
}


.info{
    position:absolute;
    z-index:5000;
    margin:0;
    padding:0;
    width:320px;
    height:230px;
    background-color:rgba(255,255,255,0.9);
    display:none;
}

.list{
    list-style-type:none;
    margin:0;
    padding:0;
    position:relative;
    list-style-position:inherit;
}
.game{
    position:relative;
    z-index:0;
    padding:0;
    margin:0;
    overflow:hidden;
    text-align: center;
    }

div.info h2{
    font-family:sans-serif;
    padding:0;
    margin-top:32%;
}

img{
    text-align: center;
    min-height:100%;
    width:100%;
    position:relative;
    z-index:0;
    top:0;

}

</style>
</head>

<body>

<div class="gL">
    <ul class="list">
    </ul>    
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
        $(function(){
            $.fn.rollbounce = function(){
                $(this).animate({'top': '-=15px'},150).animate({'top': '+=15px'},100).animate({'top': '-=5px'},100).animate({'top': '+=5px'},100)
            }

            var 
                $list = $('ul.list'),
                $info = $('div.info'),
                $li = '<li class="game"></li>'

            for(var p=0; p <= 68; p++){
                if(p<10){
                    p = '00'+p;
                } else if(p<100){
                    p ='0'+p;
                }


                $list.append($.parseHTML($li))
                console.log('this is number'+p)
                $('.game:nth-child('+p+')').append("<img src=img/image_"+p+".jpg/>").prepend("<div class='info'><h2>This is game #"+p+"</h2></div>")

            };


            $game = $('.game')

            $game.on('mouseenter',function(){
                $(this).rollbounce()
                $(this).children('.info').fadeToggle(200)
            }).on('mouseleave',function(){
                $(this).children('.info').fadeToggle(200)
            })
        });
</script>

</body>
</HTML>

显然，它本身不会起作用，因为它没有可供汇集的图像，但我希望有人能够立即说出它为什么不起作用，或者自己进行快速测试并找出答案。

谢谢你的帮助！

4

1 回答 1

0

尝试使用引号：

$('.game:nth-child('+p+')')
    .append("<img src='img/image_"+p+".jpg'/>")
    .prepend("<div class='info'><h2>This is game #"+p+"</h2></div>")

你/>最后弄乱了网址。

工作小提琴 http://jsfiddle.net/techunter/PE2gm/4/

不工作小提琴 http://jsfiddle.net/techunter/PE2gm/3

于 2013-06-03T15:14:24.437 回答