ホームページ  >  記事  >  ウェブフロントエンド  >  poshytip は、主に Weibo の人々の画像とマウス プロンプトを表示するために使用される jquery ベースのプラグインです。

poshytip は、主に Weibo の人々の画像とマウス プロンプトを表示するために使用される jquery ベースのプラグインです。

WBOY
WBOYオリジナル
2016-05-16 17:49:101136ブラウズ

この効果には、多くの場合 2 つの要件があります

1 マウスが人物画像上に移動すると、その人物の情報が表示され、マウスが人物画像から離れると、その人物に関連する情報が非表示になります
2マウスが移動すると、人の情報ブロックに到達すると、情報は表示されたままになります。マウスが人の情報ブロックから離れると、情報は非表示になります。
3 通常は手動で閉じるのではなく、自動的に閉じる必要があります。 1 つ目の要求は満たしやすいですが、1 つ目の要求はイベントが発生したときに処理するのがより面倒です
現時点では、Weibo アプリを構築する場合、2 つ目の要求に対応するのが難しいことがよくあります。個人情報については、Sina または Tencent から JS を入手する必要があると思います。長い間取り組んでいますが、JS が見つかりません。
ブログで推奨されているツールチップはありません。 park は 3 つの要件を満たすことができます。

長い間探した結果、インターネットで機能するものを見つけました。

アドレス:
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, options);

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

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


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。