0
나는 일련의 이미지를 HTML 페이지의 격자로로드하는 스크립트를 만들었습니다.은 js/jquery를 사용하여 크롬에서로드 할 이미지를 가져올 수 없습니다.
Im 이렇게하려면 js/jquery를 사용하고 Firefox 및 Safari에서는 완벽하게 작동하지만 크롬에서는 이미지를로드하지 않습니다. 그것에서 풀하지만 누군가가 제대로 작동되지 않는 이유 떨어져 말해, 나 자신에 빠른 테스트를하고 찾을 수있을 것입니다 희망 메신저 할 이미지가 없기 때문에
<!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