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. 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 бесплатно | | |
Просмотров: 464 | Загрузок: 0 |
Всего комментариев: 0 | |