HTML vs Jquery
В этой статье я расскажу как сделать простейшую галерею на html. Название “HTML vs Jquery” ,безусловно преувеличено. Чистый html
не пожет конкурировать как с jquery, так и с другими библиотеками, но всё зависит от поставленной задачи.
Если нам необходимо сделать просто прокрутку изображений, тогда конечно самым простым способом будет использование HTML-тэга marquee. И если нам будет необходимо использовать управление галереей, тогда нам не обойтись без небольших javascript‘ов.
Пример того, что у меня получилось:
Галерея на HTML
HTML Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML marquee | HTML vs Jquery | goldblog.com.ua</title>
<!--Подключаем стили сss-->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<fieldset class="gallery">
<legend>HTML</legend>
<!--Формируем бегущую строку-->
<marquee id="gall" scrolldelay="0" scrollamount="3" direction="up" truespeed
onmouseover='document.getElementById("gall").stop();'
onmouseout='document.getElementById("gall").start();'>
<img src="h.gif" ><img src="t.gif" ><img src="m.gif" ><img src="l.gif" >
</marquee>
</fieldset>
<fieldset class="manage">
<legend>Управление HTML-галлереей</legend>
<!--Устанавливаем кнопки управления галереей-->
<!--Запустить бегущую строку-->
<div id="play" onclick='document.getElementById("gall").start();'></div>
<!--Остановить бегущую строку-->
<div id="paused" onclick='document.getElementById("gall").stop();'></div>
<!--Изменить направление движения бегущей строки-->
<div id="up" onclick='document.getElementById("gall").direction="up";'></div>
<div id="left" onclick='document.getElementById("gall").direction="left";'></div>
<div id="right" onclick='document.getElementById("gall").direction="right";'></div>
<div id="down" onclick='document.getElementById("gall").direction="down";'></div>
</fieldset>
<a href="http://goldblog.com.ua">goldblog.com.ua</a>
</body>
</html>
В тело галереи можно вставить всё, чего душа пожелает: блоки, ссылки, изображения и тд…
Описание javascript-функций:
- document.getElementById(”gall”).start() - запускает бегущую строку с id=”gall
“ - document.getElementById(”gall”).stop() - останавливает бегущую строку с id=”gall“
- document.getElementById(”gall”).direction=”up” - заставляет бегущую строку двигаться вверх
- document.getElementById(”gall”).direction=”left” - заставляет бегущую строку двигаться влево
- document.getElementById(”gall”).direction=”right”- заставляет бегущую строку двигаться вправо
- document.getElementById(”gall”).direction=down”- заставляет бегущую строку двигаться вниз
Рабочий пример HTML vs jquery.rar(14 Kb)
Юзайте на здоровье
Похожие статьи
Если Вам понравилась эта статья,
подпишитесь на RSS !
Метки: галерея
марта 31, 2009 at 13:18
Ку,ТС!!!
У вас на блоге символы как билиберда отображатся- исправьте, ато хочется прочитать
марта 31, 2009 at 13:34
Не знаю, у меня всё хорошо показывает.
Может надо браузер обновить? А то Firefox 1.61 , уже 3.0.8 вышел.
И система Win2000?
апреля 7, 2009 at 19:53
[...] 10. Простая галерея на HTML - HTML vs jQuery [...]
октября 12, 2011 at 19:32
Эммм… ну коегде есть конечно Отличные галереи по ссылкам, да и авторская тема неплоха, так как не каждый может сделать тэйбл с картинками, а тут им само То, а больше и ненадо поидее. Галерея как галерея, а какую вы искали? у кого проблемы с текстом - копайте в настройках браузера- Кодировка - ставте UTF-8 а не 1251.. виндавозы потихоньку сдаются , дядя Билли скоро покинет нас, а его компанию приберут комунисты из GNU и сделают всётаки format c на Центральном сервере Microsoft… В этот день я сломаю Дискету floopy c дистрибутивом Linux и перейду на пользование КПК, чем дрочить ROOT и незнать почему я не рут с рождения ))) ..
П.С. Спасибо за CSS+HTM+JAVA много полезного!!! не проходите мимо, зацепите парочку менюшек и будет вам Счастье.