페이지 요소는 div->table->tr->td입니다. td에 있는 그림의 경우 마우스를 올리면 큰 그림이 표시되고 마우스를 올리면 큰 그림이 사라집니다. 왼쪽:
먼저 dom 요소를 생성하려면 jq의 구문을 알아야 합니다. $(html 태그). 예를 들어 여기서 img 태그가 생성됩니다. var img = $("c2049fa585fa020a016252fc10756a297e3ea2b661481ad67e0d201a6699fd14");
둘째, hover 메소드는 마우스를 가리키고 떠나는 데 사용됩니다. 구문은 $(selector).hover(inFunction,outFunction),
입니다.
마우스 포인터가 선택한 요소 위에 있을 때 실행할 두 가지 기능을 지정합니다. 그 중 inFunction은 필수이고 outFunction은 선택사항입니다.
이 메소드는 mouseenter 및 mouseleave 이벤트를 트리거합니다.
참고: 함수를 하나만 지정하면 mouseenter 및 mouseleave 이벤트에서 실행됩니다.
여기서 정의한 inFunction은 큰 그림의 위치를 결정하는 것이고, outFunction은 제거를 통해 생성된 img 노드입니다.
1) 단순히 객체를 생성하는 것만으로는 충분하지 않습니다. 생성된 객체를 문서 노드에 추가해야 합니다. jq에서 사용하는 방법은
입니다.append() - 선택한 요소의 끝에 내용을 삽입합니다
prepend() - 선택한 요소의 시작 부분에
콘텐츠를 삽입합니다.
after() - 선택한 요소 뒤에 내용을 삽입합니다
before() - 선택한 요소 앞에 콘텐츠를 삽입합니다.
여기에 적용하려면 먼저 img에 값을 할당한 다음 다음을 추가하세요.
img.attr("src", $element.find(".prePhoto").attr("src")); $element.append(img);
2) 큰 그림의 위치를 결정할 때 세 가지 매개변수가 필요합니다. 첫 번째는 참조 요소입니다. 여기서는 td의 상위 요소인 tr: var $element = $(this).parents( "tr") .
두 번째는 이번에 생성한 타겟 요소, 여기는 img, 세 번째는 타겟 요소가 나타날 수 있는 영역 요소, 보통 큰 요소, 여기는 테이블의 상위 요소인 div, $(".fatherDiv) ")
그러므로 구체적인 방법은
function getPosition($element, img, $(".fatherDiv"){ var top = $element.position().top + $element.height();//得到top:参照元素的top + 参照元素本身的height。 var maxBottom = $(".fatherDiv").height();//得到区域元素的height。 var minTop = 40; if (top + img.height() > maxBottom) { top = $element.position().top - img.height(); } if (top < minTop) {//两个if判断,保证无论怎么划动鼠标的滑轮,目标元素始终出现在屏幕上。 top = minTop; } var $firstElement = $($(".fatherDivtbody tr")[0]); img.css('top',top - $firstElement.position().top + 40); }
3) 생성된 개체를 제거합니다. $element.remove();
4) 대상 요소의 CSS는 몇 가지 조건을 충족해야 합니다: 위치:절대
.changePhoto { position: absolute; width: 120px; height: 160px; left: 300px; right: 10px; float: right; z-index: 9; }