도구 설명 JQEURY 플러그인 단순 프롬프트 상자 effect_jquery

원래는 기성 플러그인을 사용하고 싶었지만 꽤 복잡한 몇 가지를 발견했습니다. 너무 복잡할 필요가 없는 작은 효과를 얻고 싶어서 마침내 직접 작성하기로 했습니다!

구현 효과: 텍스트 위에 마우스를 올리면 작은 프롬프트 상자가 나타납니다!

효과 스크린샷:

테스트 결과: Firefox, IE6/7/8은 아래와 같이 통과되었습니다. 전문가의 조언을 환영합니다!
　코드

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

(함수($) {
$.fn.JNToolTips=function(){
var div = document.createElement("div")
div.style.cssText = 'width:300px; :solid 1px #F3A007; 배경색:#FBE6BD; 글꼴 크기:12px;위치:절대'
div.onclick=function(){$(div).remove();};
$(this).mouseover(function(e){
if(!e){e=window.event;}
div.innerHTML= $(this).attr("title");
$(this).attr("title","");
var doc = document.documentElement ? document.documentElement : document.body
div.style.left=(e.clientX doc; .scrollLeft 5 ) "px";
div.style.top=(e.clientY doc.scrollTop 5) "px";
document.body.appendChild(div)
}).mouseout( function() {
$(this).attr("title",div.innerHTML)
$(div).remove()
}); (jQuery) ;


사용법:

코드 복사 코드는 다음과 같습니다. $(document).ready(function(){

$("a").JNToolTips();

})