mouse_javascript 팁을 사용하여 작은 아이콘을 가리키면 큰 아이콘 표시

페이지 요소는 div->table->tr->td입니다. td에 있는 그림의 경우 마우스를 올리면 큰 그림이 표시되고 마우스를 올리면 큰 그림이 사라집니다. 왼쪽:

먼저 dom 요소를 생성하려면 jq의 구문을 알아야 합니다. $(html 태그). 예를 들어 여기서 img 태그가 생성됩니다. var img = $("");

둘째, 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;
}