IE8에서 작동하지 않는 자바 스크립트에 약간의 문제가 있습니다. 파이어 폭스, ie9 및 크롬에서 잘 작동하지만 ie8은 아닙니다. 나는 그것들이 ie8에서 다르게 작동하는 문서 준비와 관련이 있다고 안다. 그러나 대답을 찾을 수 없다. 아래 코드를 참조하십시오.
// JavaScript Document
/* Set Opacity to 0 for all list items that do not have class show
This prevents the gallery animation from jumping around unexpectedly.
*/
function clearShowClass() {
setTimeout(timedInterval, 1000);
};
function timedInterval() {
$('ul.slideshow li').not('.show').css("opacity", 0);
clearShowClass();
};
function slideShow(speed) {
//Call the gallery function to run the slideshow
var timer = setInterval('gallery()', speed);
//Pause the slideshow on mouse over content
$('#footer, ul.slideshow').hover(
function() {
clearInterval(timer);
},
function() {
timer = setInterval('gallery()', speed);
});
} // End of slideshow
/* Slideshow gallery main images */
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show') ? $('ul.slideshow li.show') : $('#ul.slideshow li.first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption') ? $('ul.slideshow li:first') : current.next()) : $('ul.slideshow li:first'));
//Set the fade in effect for the next image, show class has higher z-index
next.css({
opacity: 4.0
}).addClass('show').animate({
opacity: 4.0
}, 1000);
// Hide the current image
current.animate({
opacity: 0.0
}, 1000).removeClass('show');
//if no thumbnails have the highlight class, grab the first thumbnail
var currentThumb = ($('#footer li.highlight') ? $('#footer li.highlight') : $('#footer li:first'));
var nextThumb = ($('#footer li:last').hasClass('highlight')) ? $('#footer li:nth-child(1)') : $('#footer li.highlight').next($('#footer li'));
nextThumb.addClass('highlight');
currentThumb.removeClass('highlight');
}; // End of Gallery
function thumbInt() {
for (i = 1; i <= $('ul.slideshow li').length; i++) {
$('#footer .thumbnail' + i).bind('click', {
iteration: i
}, function (event) {
$('ul.slideshow li').removeClass('show').css("opacity", 0).add($('ul.slideshow li:nth-child(' + event.data.iteration + ')').addClass('show').css("opacity", 0.0).animate({
opacity: 1.0
}, 1000));
$('#footer li').removeClass('highlight').add($('#footer li:nth-child(' + event.data.iteration + ')').addClass('highlight').add($('#footer li:nth-child(' + event.data.iteration + ') img')));
});
};
};
var prmEnd = Sys.WebForms.PageRequestManager.getInstance();
prmEnd.add_endRequest(function() {
thumbInt(); // Assign int to thumbnail list items
clearShowClass(); // Prevents multiple li having .show
$('#footer img').mouseover(
function() {
$(this).animate({
opacity: 3.7
})
});
$('#footer img').mouseout(
function() {
$(this).animate({
opacity: 0.7
})
});
//Set the opacity of all images to 0
$('ul.slideshow li').css({
opacity: 0.0
});
//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({
opacity: 1.0
}).addClass('show');
//Get the first thumbnail and change css
$('#footer li:first').css({
opacity: 1.0
}).addClass('highlight');
});
$(document).ready(function() {
slideShow(6000);
thumbInt(); // Assign int to thumbnail list items
clearShowClass(); // Prevents multiple li having .show
$('#footer img').mouseover(
function() {
$(this).animate({
opacity: 3.7
})
});
$('#footer img').mouseout(
function() {
$(this).animate({
opacity: 0.7
})
});
});
이 페이지의 작동 방식은 라디오 버튼을 클릭하여 _dopostback을 트리거하고 이미지 갤러리를 표시하는 것입니다. 문제는 내가 문서 준비 코드를 _dopostback 할 때 더 이상 작동하지 않지만 ie8에서만 발생합니다. Sys.WebForms.PageRequestManager.getInstance();를 사용하고 있습니다. 내 업데이트 패널에서 업데이트 후 코드가 실행됩니다.
감사합니다.
콘솔에 메시지가 있습니까? 어떤 행동을 기대하고 있으며, 대신 무엇을보고 있습니까? – Sampson
바이올린을 설정해 주시겠습니까? – mayrs
어떻게 페이지에 스크립트를 삽입하나요? http://stackoverflow.com/questions/747854/how-does-document-ready-work-in-ie-8 – LukeP