Уважаемые пользователи skript-na-ucoz.ucoz.ru. Вы найдете у нас на портале - и сможете скачать бесплатно различные программы для вебмастеров и не только, фильмы, игры, все для фотошопа, скрипты для ваших сайтов, бесплатные шаблоны, модули, хаки и релизы популярных CMS таких-как: Datalife Engine, WordPress, Joomla, Drupal, Ucoz и многое другое, а также обсудить и получить помощь на нашем форуме. С Уважением Администрация skript-na-ucoz

Выключение света при просмотре видео
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
05.03.2010, 20:25

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

Важно! Отключение этого эффекта в IE производится лишь обновлением страницы... К сожалению.

Шаг 1.

Подключим фреймворк jquery к документу, для чего пропишем следующий код между тегами :

Code
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>  

Далее (опять же между тегами head) следует прописать скрипт:

Code
<script type="text/javascript">  

$(document).ready(function(){  

$("#shadow").css("height", $(document).height()).hide();  

$(".lightSwitcher").click(function(){  

$("#shadow").toggle();  

if ($("#shadow").is(":hidden"))  

$(this).html("Turn off the lights").removeClass("turnedOff");  

else  

$(this).html("Turn on the lights").addClass("turnedOff");  

});  

});  

</script>  

Шаг 2.
В отдельную таблицу стилей или между все теми же тегами пропишем стили эффекта:

Code
body {font-family:Arial, Sans-Serif; font-size:13px; text-align:center; margin:0px; position:relative;}  
  #container { width:960px; margin:0px auto; text-align:left; overflow:hidden; position:relative;}  
  #movie {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left; margin-right:20px;}  
  #description { float:left; width:320px;border:solid 1px #dcdcdc; padding: 10px 20px;}  
  #command { position:relative; height:25px; display:block; margin: 25px 0 0 0;}  
  .lightSwitcher {position:absolute; z-index:101; background-image:url(light_bulb_off.png);  
  background-repeat:no-repeat; background-position:left; padding: 0 0 0 20px; outline:none; text-decoration:none;}  
  .lightSwitcher:hover {text-decoration:underline;}  
  #shadow {background-image:url(shade1x1.png); position:absolute; left:0; top:0; width:100%; z-index:100;}  
  .turnedOff {color:#ffff00; background-image:url(light_bulb.png);}  
  #clickHere {position:absolute; top: -25px; left:130px;}

Шаг 3.
Создадим блок container, который будет содержать контент с видеоклипом и кнопки включения/выключения "света":

Code
<div id="container"></div>  

В него вставим выключатели, которые представляют собой ссылки и флэш-объект (он же видеофайл), а точнее ссылки на него. В данном случае мы использовали клип с youtube.com.

Таким образом, код будет иметь следующий вид:

Code
<div id="container">  
  <div id="command"><img src="click_here.png" alt="" id="clickHere" /><a class="lightSwitcher" href="#">Turn off the lights</a></div>  
   
  <div id="movie">  
  <object width="560" height="340">  
  <param name="movie" value="http://www.youtube.com/v/Mlahvvymkxc&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999" />  
  <param name="allowFullScreen" value="true" />  
  <param name="allowscriptaccess" value="always" />  
  <embed src="http://www.youtube.com/v/Mlahvvymkxc&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999"  
  type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340">  
  </embed>  
  </object>  
  </div>  
  </div>  

Шаг 4.

После этого добавим блок с тенью:

Code
<div id="shadow"></div>  
Категория: Скачать Скрипты для Ucoz бесплатно | Добавил: Kenik
Просмотров: 464 | Загрузок: 0


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Мини профиль
Для просмотра мини профиля,войдите на сайт как пользователь.
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Статистика
Счетчики сайта
Анализ сайта skript-na-ucoz.ucoz.ru Top.Mail.Ru

Яндекс.Метрика
Сейчас online
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня наш сайт посетили
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
  • Всего юзеров: 1196
    За месяц: 0
    За неделю: 0
    За вчера: 0
    Сегодня: 0
  • Счетчик материалов
  • Всего файлов: 10240
    Всего новостей: 31
    Всего статей: 0
    Темы форума: 2521
    Коментариев: 16
    Фотоальбом: 3
    Скачали: 10240
    Каталог сайтов: 35
    Онлайн Игр: 213
    Онлайн Видео: 8596
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером
    Популярное
    Скачиваемое
    Интерестное