마우스를 올렸을 때 그림이 확대되는 효과에 대한 jQuery 예제_jquery
- WBOY원래의
- 2016-05-16 17:30:151469검색
이 효과는 원래 샤오민 동지의 아이디어에서 비롯되었습니다. 처음 시작했을 때 팝업 그림이 고정되고 마우스로 움직일 수 없다는 점만 달성하고 결국 개선했습니다. 마침내 더 이상적인 효과를 얻었습니다. 오늘 저는 이 효과를 만들어낸 경험을 여러분과 공유하겠습니다. 먼저 최종 효과 시연을 살펴보겠습니다.
HTML 구조 부분:
먼저 정렬되지 않은 목록 구조를 작성합니다. a 태그의 img 태그는 작은 그림을 저장하는 데 사용됩니다. a 태그는 큰 그림의 경로를 저장하기 위해 rel 속성을 추가합니다.
코드 복사 코드는 다음과 같습니다.
🎜> < ;LI sizcache="6" sizset="9">
bigimage jQuery를 사용하여 p 태그의 ID를 생성하여 큰 그림을 저장하고 스타일을 절대 위치로 설정한 후 먼저 숨깁니다. a 태그에 검정색 배경을 추가하면 이미지가 어두워지는 효과를 얻을 수 있습니다. 이렇게 간단한 사진 앨범 효과가 완성되었습니다.
코드 복사 코드는 다음과 같습니다.
ul#gallery { list-style:none ; 너비: 660px; 여백:0 자동 10px; 테두리: 1px 솔리드 #fff; 오버플로: 숨김 }
높이: 200px; float:left ; margin:20px 20px 20px 0; }
ul#gallery li a.smallimage { background:#333; /*이미지를 어둡게 하는 효과를 위해 검정색 배경을 추가합니다.*/ ; width:200px; height:200px; }
#bigimage { position:absolute; display:none; /*큰 이미지의 상위 레이블을 상대 위치로 설정하고 표시 스타일을 숨김으로 설정합니다*/ } #bigimage img { width:400px; height:400px; background:#fff; border:1px solid #e3e3e3;
jQuery 코드 부분:
먼저 2개의 변수를 선언합니다. 및 y는 큰 이미지를 저장합니다. 마우스로부터의 거리. 큰 이미지를 저장하려면 ID가 bigimage인 p 태그를 본문에 추가하세요. 큰 이미지의 경로는 a 태그의 rel 속성에 포함됩니다. 작은 그림 위에 마우스를 올리면 브라우저에서 얻은 마우스 좌표가 큰 그림의 절대 위치 좌표에 할당되어 페이드인 효과로 표시됩니다. 그런 다음 작은 그림에 mousemove 이벤트를 바인딩합니다. 즉, 마우스가 움직이면 큰 그림도 마우스와 함께 움직입니다. 다음 코드를 보세요. 높이: 200px; float:left ; margin:20px 20px 20px 0; }
ul#gallery li a.smallimage { background:#333; /*이미지를 어둡게 하는 효과를 위해 검정색 배경을 추가합니다.*/ ; width:200px; height:200px; }
#bigimage { position:absolute; display:none; /*큰 이미지의 상위 레이블을 상대 위치로 설정하고 표시 스타일을 숨김으로 설정합니다*/ } #bigimage img { width:400px; height:400px; background:#fff; border:1px solid #e3e3e3;
jQuery 코드 부분:
코드를 복사하세요. 코드는 다음과 같습니다.
이 시점에서는 거의 효과가 나타납니다. 하지만 Lan Qiufeng 동지가 언급했듯이 효과는 아직 완벽하지 않습니다. 팝업되는 큰 그림이 브라우저의 너비를 초과하면 스크롤 막대가 나타나게 되는데, 이는 사용자 경험에 정말 좋지 않습니다. 주말의 시간을 활용하여 원본을 바탕으로 수정을 해보았습니다. 먼저 아이디어를 분석해 보겠습니다. 기본적으로 팝업되는 큰 그림의 위치는 항상 현재 마우스 포인터의 오른쪽에 있습니다. 브라우저의 오른쪽 테두리에서 현재 마우스 포인터의 너비가 다음보다 작습니다. 팝업되는 큰 그림의 너비에 따라 그림이 브라우저에서 오버플로될 수 있습니다. 그런 다음 브라우저 오른쪽 테두리를 기준으로 현재 마우스 포인터의 너비가 큰 이미지의 너비보다 작은지 확인하는 명령문을 작성하고 이 판단에 따라 표시하면 됩니다.
위 아이디어로 코드를 더욱 간결하게 만들고 재사용성을 높이기 위해 너비를 판단하는 새로운 widthJudge 함수를 추가했습니다.
이 시점에서는 거의 효과가 나타납니다. 하지만 Lan Qiufeng 동지가 언급했듯이 효과는 아직 완벽하지 않습니다. 팝업되는 큰 그림이 브라우저의 너비를 초과하면 스크롤 막대가 나타나게 되는데, 이는 사용자 경험에 정말 좋지 않습니다. 주말의 시간을 활용하여 원본을 바탕으로 수정을 해보았습니다.
위 아이디어로 코드를 더욱 간결하게 만들고 재사용성을 높이기 위해 너비를 판단하는 새로운 widthJudge 함수를 추가했습니다.
코드 복사 코드는 다음과 같습니다.
function widthJudge(e){
//페이지의 전체 너비에서 마우스의 현재 X 좌표를 뺀 값이 오른쪽 테두리의 너비입니다.
var marginRight = document.documentElement.clientWidth - e.pageX;
// 팝업의 큰 그림의 너비
var ImageWidth = $ ("#Bigimage"). Width ()
// > if(marginRight < imageWidth)
{
//변수 x 값 다시 계산
x = imageWidth 22
x의 새 값 가져오기
$("#bigimage").css({top:(e .pageY - y ) 'px',left:(e.pageX - x ) 'px'})
값이 큰 이미지를 표시하기에 충분할 경우 원래 위치로 계속 표시됩니다.
$("#bigimage").css({top:(e.pageY - y ) 'px',left:(e.pageX x ) 'px '});
마지막으로 위의 코드와 결합하면 완전한 jQuery 코드 부분은 다음과 같습니다.
코드 복사
코드
function widthJudge(e){
//페이지의 전체 너비에서 마우스의 현재 X 좌표를 뺀 값이 오른쪽 테두리의 너비입니다.
var marginRight = document.documentElement.clientWidth - e.pageX;
// 팝업의 큰 그림의 너비
var ImageWidth = $ ("#Bigimage"). Width ()
// > if(marginRight < imageWidth)
{
//변수 x 값 다시 계산
x = imageWidth 22
x의 새 값 가져오기
$("#bigimage").css({top:(e .pageY - y ) 'px',left:(e.pageX - x ) 'px'})
값이 큰 이미지를 표시하기에 충분할 경우 원래 위치로 계속 표시됩니다.
$("#bigimage").css({top:(e.pageY - y ) 'px',left:(e.pageX x ) 'px '});
마지막으로 위의 코드와 결합하면 완전한 jQuery 코드 부분은 다음과 같습니다.
코드 복사
코드