Открытие и закрытие дополнительного окна с анимацией при наведении на текст - скрипт

Открытие окна с анимацией при наведении на текст

Новое окно открывается постепенно с анимацией при наведении на текст. Для просмотра скрипта в работе (у вас должен быть включен в браузере Java Script) нажмите кнопку посмотреть пример.

<CENTER>
<FONT color="#20ffff"><h3><CENTER>Вы смотрите пример работы скрипта, дополнительное окно открывается постепенно с анимацией при наведении на текст. </CENTER></h3></FONT color>
<html>
<head>

<script>
var fadeOpacity=new Array();var fadeTimer=new Array();var fadeInterval=100;function fade(o,d){var obj=document.getElementById(o);if((fadeTimer[o])||(d&&obj.style.display!='block')||(!d&&obj.style.display=='block')){if(fadeTimer[o])
clearInterval(fadeTimer[o]);else
if(d)fadeOpacity[o]=0;else fadeOpacity[o]=9;obj.style.opacity="."+fadeOpacity[o].toString();obj.style.filter="alpha(opacity="+fadeOpacity[o].toString()+"0)";if(d){obj.style.display='block';fadeTimer[o]=setInterval('fadeAnimation("'+o+'",1);',fadeInterval);}else
fadeTimer[o]=setInterval('fadeAnimation("'+o+'",-1);',fadeInterval);}}
function fadeAnimation(o,i){var obj=document.getElementById(o);fadeOpacity[o]+=i;obj.style.opacity="."+fadeOpacity[o].toString();obj.style.filter="alpha(opacity="+fadeOpacity[o].toString()+"0)";if((fadeOpacity[o]=='9')|(fadeOpacity[o]=='0')){if(fadeOpacity[o]=='0')
obj.style.display='none';else{obj.style.opacity="1";obj.style.filter="alpha(opacity=100)";}
clearInterval(fadeTimer[o]);delete(fadeTimer[o]);delete(fadeTimer[o]);delete(fadeOpacity[o]);}}
</script>
<style type = "text/css">
.demoPopup { border: solid 1px #000; font-family: Tahoma; font-size: 12px; display: none; position: absolute; width: 300px; z-index: 60;}
.demoPopuptitle {background: blue;color: white; font-weight: bold; height: 15px; padding: 5px;}
.demoPopupbody {background: #ddd;  padding: 5px;  text-align: center;}
#demoPopup1 {  top: 100px;  left: 50px;}
#demoPopup2 {  top: 100px;  left: 400px;}
</style>
</head>
<body>
<span  onmouseover="fade('demoPopup1',true);" onmouseout="fade('demoPopup1',false);"><FONT color="#d1f6fa">Наведите курсор мыши!</span>
<div id="demoPopup1" class="demoPopup">
  <div class="demoPopuptitle">Окно</div>
  <div class="demoPopupbody">
    <p>Уберите курсор с ссылки, чтоб закрыть</p>  
    <img src=67we.jpg width=50>
  </div>
</div>

<div style="text-align:right;position:fixed;bottom:3px;right:3px;width:100%;z-index:999999;cursor:pointer;line-height:0;display:block;"><a target="_blank" href="https://www.freewebhostingarea.com" title="Free Web Hosting with PHP5 or PHP7"><img alt="Free Web Hosting" src="https://www.freewebhostingarea.com/images/poweredby.png" style="border-width: 0px;width: 180px; height: 45px; float: right;"></a></div>
</body>

</html>
<BODY onUnload="ByeWin()" bgcolor="#2e3435">

Разделы сайта

Достоинства JavaScript Сравнение JavaScript с другими популярными языками программирования.

Объекты и их атрибуты Наиболее часто в сценариях javascript нам придется обращаться к объектам.

Объекты и их имена
Веб страница представляет собой набор объектов содержащих в себе информацию.

Просмотреть все