Описание при наведении курсора на изображение - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


Отличный скрипт по своей функциональности, так как его можно поставить хоть на сам сайт или в материал, это появление описание, когда вы наводите курсор на изображение. Вы ставите тематическую картинку и пишите статью или простою заметку и все в скрипт, который ниже представлен. Пользователь просто наводит и изображение поднимается вверх и остается один текст.


Первый идет под жирным шрифтом, а вот второй уже стандартный. При создание сайта или когда он уже у вас есть, можно просто в добавление материала поставить все и выставить только не забудьте "Панель HTML кодов" и можете писать что вам нужно, вообщем вы поняли суть работы.
 
Установка:

Ставим там, где вы хотите видеть, можно в самом материале любого модуля, кроме форума.
Code
<style type="text/css" rel="stylesheet">  
  #bo1xe {margin:10px; font-size:15px; color:#f9f9f9;}  
  #bo2xe {margin:5px; font-size:17px; color:#f1f1f1;}  
  #bonxe {position:relative; width:325px; height:325px; z-index:1; overflow:hidden; margin:5px; border:5px solid #cdcdcd; background:#131313;}  
  #bonxe img {position:absolute; width:325px; height:325px; z-index:2;}  
  </style>  

  <script type="text/javascript">$(function(){$("#bonxe").hover(function(){$(this).find("img").stop().animate({top:-325},500);},function(){$(this).find("img").stop().animate({top:0},500);});});</script>  

  <div id="bonxe">  
  <img src="http://zornet.ru/Ajaxoskrip/Aster/02f3-5.jpg">  
  <div id="bo1xe">  
  <b id="bo2xe">Заголовок в жирном описание</b>  
  <p>Здесь вы пишите, по вашему материалу, или вообще правила сайта, что вам нужно и что придумаете, зачем вам.</p>  
  </div></div>

Важно!

При копировании материала указывать ссылку на источник.

- 562
- 30-Ноября-2016
- 0
Материал разместил:

Похожий материал
Статьи сайта