JS CSS는 버블 프롬프트 box_javascript 기술을 구현합니다.

버블 프롬프트 상자를 공유합니다. 연습되는 기술은 다음과 같습니다. (1) JS는 마우스 이벤트에 응답합니다. (2) 순수 CSS는 삼각형을 만듭니다.

효과는 다음과 같습니다.

html은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

풍선 대화상자

border: 10px 솔리드 #AAAAAA; 테두리 색상: 투명 #AAAAAA 투명
폭: 0

위치: 왼쪽:-20px; top: 5px }

코드 복사


코드는 다음과 같습니다.

/*끝이 왼쪽, 내부를 가리키는 삼각형,*/

.triRightInner{ z-index: 3; solid #FEFAB8; border-color: transparent #FEFAB8 transparent transparent;/*색상은 프롬프트 상자의 배경색과 일치해야 합니다. */ SPAN>

폭: 0; 높이: 0; 위치: 절대:-16px; 상단:7px;}

풍선 대화상자

여기에 마우스를 놓으면 버블 대화 상자가 나타납니다.

sharejs.com

[수정하려면 클릭하세요. ]

style="FONT-FAMILY: Microsoft YaHei; FONT-SIZE: 18px">자바스크립트 코드는 다음과 같습니다:

< ;/P>

function showToolTip(e,text){ <BR>if(document.all)e = event <BR>var obj = document. getElementById('bubble_tooltip'); <BR>var obj2 = document.getElementById('bubble_tooltip_content'); <BR>obj2.innerHTML = text; <BR>var st = Math.max(document.body.scrollTop,document.documentElement . scrollTop); <BR>if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; <BR>var leftPos = e.clientX 20; 이벤트 트리거될 때 브라우저 페이지(또는 클라이언트 영역)를 기준으로 하는 마우스 포인터의 수평 좌표 <BR>if(leftPos<0)leftPos = 0 <BR>obj.style.left = leftPos 'px'; >obj.style.top = e.clientY st 'px'; <BR>obj.style.display = 'block'; <BR>fadeIn(obj,5,100) <BR><BR>function hideToolTip () <BR>{ <br>var obj = document.getElementById('bubble_tooltip') <br>//obj.style.display = 'none' <BR>fadeOut(obj,5,0); >} <BR><BR>//요소 투명도 설정, 투명도 값은 IE 규칙에 따라 계산됩니다(즉, 0~100) <BR>function SetOpacity(ev, v){ <BR>ev.filters ? style.filter = 'alpha(opacity =' v ')' : ev.style.opacity = v / 100; <br>} <br><BR>//페이드 인 효과(지정된 투명도로 페이드 인 포함) <BR>function fadeIn(elem, speed, opacity) { <BR>/* <br>* 매개변수 설명<br>* elem==> 페이드인이 필요한 요소 <BR>* speed==>gt; 속도, 양의 정수(선택 사항) <BR>* opacity== >지정된 투명도로 페이드, 0~100(선택 사항) <BR>*/ <BR>속도 = 속도 <BR>불투명도 = 20; || 100; <BR>//요소 값은 0 투명도입니다. <BR>elem.style.display = 'block' <BR>SetOpacity(elem, 0)// 초기화 투명도 변경 값은 0 <BR>var val = 0 ; <BR>//투명도 값을 2씩 증가시키는 루프, 즉 페이드인 효과 <BR>(function(){ <BR>SetOpacity(elem , val); <BR>val = 5; <BR>if (val < = opacity) { <BR>setTimeout(arguments.callee, speed) <BR>} <BR>})(); <BR><BR>//페이드 아웃 효과(지정된 투명도로 페이드 아웃 포함) <BR>function fadeOut(elem, speed, opacity){ <BR>/* <BR>* 매개변수 설명<BR>* elem== >페이드 인해야 하는 요소<br>* 속도==>페이드 인 속도, 양의 정수(선택 사항) <br>* 불투명도==> 지정된 투명도로 페이드 인, 0~100(선택 사항) <BR>*/ <BR>속도 = 속도 || 20; <BR>불투명도 = 불투명도 || 0 <BR>//투명도 변경 값을 0으로 초기화 <BR>var val = 100>// 투명도 값을 5로 줄입니다. 즉, 페이드아웃 효과 <BR>(function(){ <BR>SetOpacity(elem, val); <BR>val -= 5; <BR>if (val >= opacity) { <BR>setTimeout(arguments.callee, speed); <BR>}else if (val < 0) { <BR>//요소 투명도가 0이면 요소 숨기기 <BR>elem.style.display = '없음'; <BR>})() <BR>}

🎜>