즉석에서 새 요소 만들기

Question

나는 img 요소가 있습니다. 사용자가 마우스를 가져 가면 div 안에 동일한 이미지가있는 마우스 근처에 새로운 div를 만들고 싶습니다. 예를 들어 미리보기와 같습니다. 기존 플러그인을 사용하고 싶지 않습니다. 그것을 성취 할 수있는 간단한 방법이 있습니까?

Answer 1

확인이 블로그 게시물 (2 예)

Image Preview using jQuery

Working example

그런 다음 바로 CSS 그가 사용되는 JS 체크 아웃 그 예에서 (힌트 : 소스 코드).

당신은 정말 모든 것을 플러그인이 필요하지 않습니다, 나는 당신과 동의이

Answer 2

기존 플러그인을 다시 사용하고 싶지 않다고 말하는 이유는 무엇입니까?

나는이 thumbnail plugin이 당신이 무엇을하고 있는지 정확히 파악할 것이라고 믿습니다. 이를 구현하는 데 필요한 코드는 감소됩니다 :

<script> 
$("img").thumbPopup({ 
    imgSmallFlag: "_s", 
    imgLargeFlag: "_l" 
}); 
</script> 

Answer 3

후 훨씬 쉽게 가져올 수 없습니다. 당신이 달성하고자하는 것은 매우 간단합니다 :

페이지 html로로드 된 이미지가있는 절대 위치 지정된 div가 있습니다. 당신이 축소판 동일한 파일을 사용하고 미리보기 당신이 같은 시도 할 수 있다면, 그들에게 spcific ID를 보내기

$('.thumbnails_class').mousemove(function(e) { 
    $('#preview_div').css({top: e.pageY, left: e.pageY}); 
    $('#preview_img').attr('src', $(this).attr('src')); 
}); 

내가 코드를 테스트하지 않았

을,하지만 난 그냥 작동합니다 생각 벌금. 축소판과 미리보기가 모두, 당신은 여전히 ​​유사한 기술을 사용할 수 있습니다 당신은 동일한 이미지를 사용하지 않는 경우, 바로 미리보기 SRC 만들 썸네일의 src 속성을 사용 :이 예에서는

$('.thumbnails_class').mousemove(function(e) { 
    $('#preview_div').css({top: e.pageY, left: e.pageY}); 
    $('#preview_img').attr('src', $(this).attr('src').replace(/thumb/, 'preview')); 
}); 

를 내가 파일 이름에서 미리보기로 단어를 대체하십시오.

마지막으로, 당신은 표시/미리보기 숨길 필요가 :

$('.thumbnails_class').mouseover(function() { 
    $('#preview_div').show(); 
}); 

$('.thumbnails_class').mouseout(function() { 
    $('#preview_div').hide(); 
}); 

을 그리고 그것 뿐이다. 필요한 조정을하면 갈 수 있습니다.