Плавно проявляющаяся всплывающая подсказка

P

phpMaster

<div class="bbWrapper">Для получения плавно проявляющейся всплывающей подсказки, для начала вставить вверху странички между тегами<b>&lt;head&gt;&lt;/head&gt;</b>стиль всплывающей подсказки:<br /> <div class="bbCodeBlock bbCodeBlock--screenLimited bbCodeBlock--code"> <div class="bbCodeBlock-title"> HTML: </div> <div class="bbCodeBlock-content" dir="ltr"> <pre class="bbCodeCode" dir="ltr" data-xf-init="code-block" data-lang="html"><code>&lt;style type=&quot;text/css&quot;&gt; .demo_popup { border: solid 1px #333; font-family: Tahoma; font-size: 12px; display: none; position: absolute; width: 300px; z-index: 60; background: #ddd; padding: 5px; text-align: center; top: 490px; left: 550px; } &lt;/style&gt;</code></pre> </div> </div>Далее добавьте на свою страничку сам скрипт, который реализует плавно проявляющуюся всплывающую подсказку:<br /> <div class="bbCodeBlock bbCodeBlock--screenLimited bbCodeBlock--code"> <div class="bbCodeBlock-title"> Код: </div> <div class="bbCodeBlock-content" dir="ltr"> <pre class="bbCodeCode" dir="ltr" data-xf-init="code-block" data-lang=""><code>&lt;script type=&quot;text/javascript&quot;&gt; var fade_opacity = new Array(); var fade_timer = new Array(); var fade_interval = 100; function fade(obj,d) { var object = document.getElementById(obj); if((fade_timer[obj])||(d&amp;&amp;object.style.display!='block')|| (!d&amp;&amp;object.style.display=='block')) { if(fade_timer[obj]) clearInterval(fade_timer[obj]); else if(d) fade_opacity[obj] = 0; else fade_opacity[obj] = 9; object.style.opacity = &quot;.&quot;+fade_opacity[obj].toString(); object.style.filter = &quot;alpha(opacity=&quot;+fade_opacity[obj].toString()+&quot;0)&quot;; if(d) { object.style.display = 'block'; fade_timer[obj] = setInterval('fade_animation(&quot;'+obj+'&quot;,1);',fade_interval); } else fade_timer[obj] = setInterval('fade_animation(&quot;'+obj+'&quot;,-1);',fade_interval); }} function fade_animation(obj,i) { var object = document.getElementById(obj); fade_opacity[obj] += i; object.style.opacity = &quot;.&quot;+fade_opacity[obj].toString(); object.style.filter = &quot;alpha(opacity=&quot;+fade_opacity[obj].toString()+&quot;0)&quot;; if((fade_opacity[obj]=='9')|(fade_opacity[obj]=='0')) { if(fade_opacity[obj]=='0') object.style.display = 'none'; else { object.style.opacity = &quot;1&quot;; object.style.filter = &quot;alpha(opacity=100)&quot;; } clearInterval(fade_timer[obj]); delete(fade_timer[obj]); delete(fade_timer[obj]); delete(fade_opacity[obj]); } } &lt;/script&gt;</code></pre> </div> </div>Ну и далее остается описать объекты, при наведении на которые курсора мышки будет проявляться наша всплывающая подсказка и сами подсказки. Делать это следует так:<br /> <div class="bbCodeBlock bbCodeBlock--screenLimited bbCodeBlock--code"> <div class="bbCodeBlock-title"> HTML: </div> <div class="bbCodeBlock-content" dir="ltr"> <pre class="bbCodeCode" dir="ltr" data-xf-init="code-block" data-lang="html"><code>&lt;div align=&quot;center&quot;&gt; &lt;span onMouseOver=&quot;fade('demo_hint1',true);&quot; onMouseOut=&quot;fade('demo_hint1',false);&quot;&gt; &lt;b&gt;absolute&lt;/b&gt; &lt;/span&gt; &lt;span onMouseOver=&quot;fade('demo_hint2',true);&quot; onMouseOut=&quot;fade('demo_hint2',false);&quot;&gt; &lt;b&gt;fixed&lt;/b&gt; &lt;/span&gt; &lt;/div&gt; &lt;div id=&quot;demo_hint1&quot; class=&quot;demo_popup&quot;&gt; Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. &lt;/div&gt; &lt;div id=&quot;demo_hint2&quot; class=&quot;demo_popup&quot;&gt; По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. &lt;/div&gt;</code></pre> </div> </div></div>
 

Rubrika

Участник
Сообщения
350
Реакции
43
PSC
0,00
Хороший код, мне понравился, позволил убрать нагромождение текста на странице и выдавать нужную инфу при наведении.)
 
Сверху