jQuery는 마우스가 picture_jquery 위로 지나갈 때 큰 그림 미리보기 효과를 실현합니다.

jQuery: 이는 클라이언트 측 기술입니다. 적게 작성하고 더 많은 작업을 수행합니다.

따라서 jQuery를 사용하면 매우 멋진 효과를 얻을 수 있습니다. , javaScript와 비교하면 동일한 효과가 있지만 매우 간단한 코드입니다. jQuery의 핵심 지식은 선택기의 사용입니다. 선택기의 내용은 다음 블로그에서 모두가 읽어보시기 바랍니다.

이 블로그 게시물은 jQuery를 사용하여 쇼핑 웹사이트에서 흔히 볼 수 있는 것을 구현하는 방법에 대해 설명합니다. 마우스를 이미지 번호 위로 가져가면 이미지가 확대되어 큰 미리보기가 됩니다. 다음으로 메인 코드를 붙여넣겠습니다. 먼저 $(function(){})

코드 복사 코드를 다음과 같이 붙여넣습니다. 다음:

var x = 5;
var y = 15
$("table tr td img").mousemove(function(e) {
$(" #imageTip").attr("src", this.src)//프롬프트 이미지의 경로 설정
.css({
"top" : (e.pageY y) "px",
" 왼쪽" : (e.pageX (function(){
$("#imageTip").hide();//사진 숨기기

});


다음 페이지 레이아웃 코드:

코드 복사

코드는 다음과 같습니다.

🎜>


td>

;/테이블>
<테이블>

옵션	이름
< /td>		양미 < ;/tr> < ;tr id="1">		< img src="images/xiao02.jpg" alt="">	린 샤오
	공밍
<입력 ="checkbox" id= "checkAll">모두 선택<입력 id="btnDel" type="button" value="Delete"> 🎜>

여기서 왼쪽의 마지막 코드 줄만 주의하면 됩니다. 위의 내용은 테이블의 레이아웃일 뿐입니다.

다음은 CSS입니다.




코드 복사

코드는 다음과 같습니다.

body { 글꼴 크기: 12px; } table tr td img { border: soild 1px #666; 너비: 높이 : 240px;

패딩: 3px;

커서:
}

.clsImg {
위치: 절대값
너비: 400px;
높이: 400px;
디스플레이: 없음
}