HTML vs Jquery
Вторник, марта 24, 2009
В этой статье я расскажу как сделать простейшую галерею на html. Название “HTML vs Jquery” ,безусловно преувеличено. Чистый html
не пожет конкурировать как с jquery, так и с другими библиотеками, но всё зависит от поставленной задачи.
Если нам необходимо сделать просто прокрутку изображений, тогда конечно самым простым способом будет использование HTML-тэга marquee. И если нам будет необходимо использовать управление галереей, тогда нам не обойтись без небольших javascript‘ов.
Пример того, что у меня получилось:
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 !