>웹 프론트엔드 >JS 튜토리얼 >pochytip은 주로 Weibo 사람들의 이미지와 마우스 프롬프트를 표시하는 데 사용되는 jquery 기반 플러그인입니다.

pochytip은 주로 Weibo 사람들의 이미지와 마우스 프롬프트를 표시하는 데 사용되는 jquery 기반 플러그인입니다.

WBOY
WBOY원래의
2016-05-16 17:49:101155검색

이 효과에는 두 가지 요구 사항이 있는 경우가 많습니다

1 인물 이미지 위로 마우스를 이동하면 해당 인물의 정보가 표시되고, 인물 이미지에서 마우스를 벗어나면 해당 인물의 관련 정보가 숨겨집니다
2 마우스가 움직일 때 사람의 정보 블록에 도달하면 정보가 계속 표시됩니다. 마우스가 사람의 정보 블록을 벗어나면 정보가 숨겨집니다
3 수동으로 닫히지 않고 자동으로 닫혀야 합니다

보통 첫 번째는 만족하기 쉽지만, 이벤트가 터지면 첫 번째가 처리하기가 더 번거롭습니다.
이때 두 번째 수요를 처리하기 어려운 경우가 있습니다.
웨이보 앱을 구축할 때 종종 발생합니다. 개인정보는 Sina나 Tencent에서 가져와야 할 것 같아요. 오랫동안 작업했는데 js를 찾을 수가 없어요.
블로그에서 추천하는 툴팁이 하나도 없어요. 공원은 세 가지 요구 사항을 충족할 수 있습니다.

오랫동안 검색한 끝에 인터넷에서 작동하는 것을 찾았습니다.

주소: http://demo.jb51.net/ js/2011/poshytip/demo/index.html
다운로드 주소http://www.jb51.net/jiaoben/38747.html
단, 서버를 줄이기 위해 부담스럽네요, 이 js는 집중적으로 사용하면 div가 많이 생성될 것 같아서 조금 최적화 했습니다,
코드는 다음과 같습니다

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

$.Poshytip = function( elm, options) {
if( $(elm).data('Poshytipkeyint')!= "1")
{
$(elm).data('Poshytipkeyint','1')
}
else
{
return
}
this.$elm = $(elm);
this.opts = $.extend({}, $.fn .poshytip.defaults, 옵션)

this.$tip = $(['
',
'
',
'
',
'
'].join('')).appendTo(document.body);

this.$arrow = this.$tip.find('div.tip-arrow')
this.$ inner = this.$tip.find('div.tip-inner');
this.disabled = false;
this.content = null;


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.