Javascript代码

> 웹 프론트엔드 > HTML 튜토리얼 > 간단한 jquery CSS를 사용하여 사용자 정의 태그 제목 프롬프트를 생성합니다. tooltip_HTML/Xhtml_web 페이지 제작

간단한 jquery CSS를 사용하여 사용자 정의 태그 제목 프롬프트를 생성합니다. tooltip_HTML/Xhtml_web 페이지 제작

WBOY
풀어 주다: 2016-05-16 16:37:39
원래의
1610명이 탐색했습니다.

소개

간단한 jquery CSS를 사용하여 브라우저의 기본 동작을 대체하는 사용자 정의 태그 제목 프롬프트를 만듭니다. 그림과 같이:



Javascript 코드

코드 복사
code 다음과 같습니다:

$(function() { 
$("a[title ]").each(function() {
var a = $(this);
var title = a.attr('title');
if (title == 정의되지 않음 || title == "") return ;
a.data('title', title)
.removeAttr('title')
.hover(
function () {
var offset = a.offset ();
$("
").appendTo($("body")).html(title).css({ top: offset.top a.outerHeight( ) 10, 왼쪽: offset.left a.outerWidth() 1 }).fadeIn(function () {
var pop = $(this);
setTimeout(function () { pop.remove (); } , pop.text().length*80);
},
function() { $("#anchortitlecontainer").remove() ; );
});
})


JQuery를 인용하는 것을 잊지 마세요.

코드의 setTimeout(function () { pop.remove(); }, pop.text().length*80); 제목 프롬프트가 너무 짧지 않도록 제목 길이를 기준으로 프롬프트 시간을 계산합니다. . 길거나 너무 긴 제목 프롬프트는 너무 짧습니다.

CSS 코드



코드 복사코드는 다음과 같습니다.
# 앵커 제목 컨테이너 {
위치: 절대;
z-색인: 5999;
테두리: 단색 1px #315B6C; 패딩: 5px
배경 : 없음 반복 스크롤 0 0 #FFFFFF;
경계 반경: 5px;
표시: 없음
}
#anchortitlecontainer:before {
위치: 절대: 자동; ;
왼쪽: -1px;
테두리 색상: 투명 투명 #315B6C;테두리 스타일:
테두리 너비: 15px; >내용: "";
디스플레이: 블록;
너비: 0;
}
#anchortitlecontainer:after {
하단: 자동; : 0px;
상단: -13px;
테두리 색상: 투명 투명 #FFFFFF; 테두리 스타일: 솔리드
테두리 너비:
내용: "";
display: block;
width: 0;
}


이미지 사용을 방지하려면 일부 CSS3 기능을 사용하세요.

저는 CSS 전문가가 아니기 때문에 이 스타일을 조정하는 데 시간이 좀 걸렸습니다. 누군가가 사용할 수 있다면 영광입니다. :)
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿