0
我已經制作了一個腳本，用於將圖像從數字序列加載到html頁面中的網格中。無法使用js/jquery獲取圖像以加載chrome
即時通訊使用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>
顯然，它不會在小提琴作品本身，因爲它沒有圖像從池，但即時通訊希望有人能夠告訴馬上爲什麼它可能無法正常工作，或做一個快速測試自己，並找到出來。
感謝您的幫助！
你檢查的開發工具的控制檯？錯誤？ – j08691
他只會得到一些404 – TecHunter