Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!
Иногда я нахожу необычные примеры для написания уроков. Вот один из таких – это использование обычного формата изображения *.jpg в качестве луча фонарика. Чтобы придать нужный эффект, нам понадобится jQuery. Но сначала необходимо создать обычный html-документ: index.html. Не стану объяснять как это сделать … думаю, вы и сами знаете.
Начну как обычно с того, что должно быть в шапке нашей страницы. Вставим сразу наши скрипты, а также небольшой css-код.
<!-- Обещанный jQuery -->
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$().mousemove(function(e){
var backx = e.pageX - 250;
var backy = e.pageY - 250;
var backpos = backx+'px '+backy+'px';
$("body").css('background-position',backpos);
});
});
</script>
<!-- И немного css для того, чтобы определить цвет фона, выставить наш *.jpg фонарик и установить стиль основного текста -->
<style type="text/css">
body { margin:0; background:#1c1c1c url(img/flashlight.jpg) 50% 50% no-repeat; color:#1c1c1c; text-align:center; }
#wrap { width:100%; height:100%;}
#text { width:600px; margin:50px auto 0; text-align:left; }
#text p { margin:20px 0 0 20px; padding-left:10px; border-left:3px solid #1c1c1c; font:bold 18pt Georgia; }
</style>
<div id="wrap"> <div id="text"> <p>Ваш текст находится здесь</p> </div> </div>
На этом мой небольшой урок окончен. Я сомневаюсь, что кому то понадобится такой эффект на сайте. Но возможно ресурсы страшилок будут в восторге от таких эффектов. Представьте, вы сидите перед компьютером одни дома в кромешной темноте и читаете Стивена Кинга, подсвечивая при этом фонариком текст. Напоминает как дети под одеялом книжки читают.
Flashlight – без использования flash (109.3 KB, 13 скачиваний)
Файл залит 20.08.2010 в 23:06
Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!
Комментарии
(1 weeks назад)
(4 weeks назад)
(4 weeks назад)
(28 weeks назад)
(28 weeks назад)