기본 JavaScript를 사용하여 도구 설명 부동 프롬프트 상자 효과를 구현하기 위한 그래픽 및 텍스트 코드에 대한 자세한 설명

이 글은 기본 자바스크립트에서 툴팁플로팅 프롬프트 상자 특수 효과의 디자인과 구현을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다. 🎜>

기본 JavaScript를 사용하여 도구 설명 부동 프롬프트 상자 효과를 디자인 및 구현하고 코드 단순화, 이벤트 바인딩, 이벤트 버블링 및 기타 기술과 지식에 대해 알아봅니다.

특수 효과의 4가지 핵심:

표시: 도구 설명 하이퍼링크 위로 마우스를 이동하면 도구 설명 프롬프트 상자가 표시됩니다.

숨기기 : 마우스 다른 곳으로 이동하면 도구 설명 프롬프트 상자가 자동으로 숨겨집니다.
위치 지정: 도구 설명 프롬프트 상자의 위치는 도구 설명 하이퍼링크의 위치에 따라 설정되어야 합니다.
구성 가능: 도구 설명 프롬프트 상자는 크기와 크기를 변경할 수 있으며 다양한 매개변수에 따라 콘텐츠 표시

참고:

1) border-radius 및 box-shadow는 호환되는 쓰기 방법입니다.

2) 여부에 관계없이 마우스 포인터가 선택한 요소 또는 해당 하위 요소를 통과하면 mouseover 이벤트가 트리거됩니다. mouseout에 해당

mouseenter 이벤트는 마우스 포인터가 선택한 요소를 통과할 때만 트리거됩니다. mouseleave

3)

W3C에 따르면 인라인 요소 는 블록 수준 요소를 중첩할 수 없다고 규정하고 있습니다. W3C 표준을 따르지 않음 (팁: a링크로 이동할 때 a링크에 생성됨)

간단한 함수 캡슐화 작성 방법(참조하기 쉽고, 코드량 단축):

1) 요소를 통해 id는

var $ = function(id){
return document.getElementById(id);
 }

요소의 DOM 참조를 가져옵니다. 2)

function addEvent(obj,event,fn){ //要绑定的元素对象，要绑定的事件，触发的回调函数
if(obj.addEventListener){ //非IE，支持冒泡和捕获
obj.addEventListenner(event,fn,false);
}else if(obj.attachEvent){ //IE，只支持冒泡
obj.attachEvent('on'+event,fn);
}
}

이벤트를 바인딩하는 기능은 그림과 같은 효과를 갖습니다. 🎜>

아아아아

위 내용은 기본 JavaScript를 사용하여 도구 설명 부동 프롬프트 상자 효과를 구현하기 위한 그래픽 및 텍스트 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!