JS_javascript 기술에서 마우스가 그림 위로 슬라이드할 때 그림을 전환하는 아이디어

많은 웹사이트에서 마우스를 사진 위에 올리면 해당 사진이 다른 사진으로 전환되는 것을 볼 수 있습니다. 여기서 편집자는 이것이 어떻게 달성되는지에 대해 이야기합니다.

Javascript 코드를 작성하기 전에 실험적인 HTML 코드가 있어야 합니다

코드 복사 코드는 다음과 같습니다.

>

<스크립트 유형 = "text/javascript">
;





JS 코드 분석에 집중하겠습니다

코드 복사

$(document).ready(function(){ var newImage = new Image(); //이미지 미리 로드

var oldImage = $('img' ).attr('src' );

newImage.src = './images/img03.jpg';
$('img').hover(function(){ //전환하려면 이미지 위에 마우스를 올리세요.
$('img' ).attr('src',newImage.src)
},
function(){
$('img').attr('src',oldImage );
});
});


여기서 모두가 혼란스러워하는 것은 이미지를 미리 로드해야 하는 이유입니다. 웹사이트의 로컬 디버깅과 달리 이미지가 너무 빨리 다운로드되기 때문입니다. 인터넷의 경우 전환할 이미지 위로 마우스를 슬라이드하면 대체 이미지가 일시적으로 다운로드되며 이미지를 로드하는 과정이 상대적으로 느립니다. 따라서 이미지를 미리 로드하여 이 문제를 해결할 수 있습니다.