Блог Web-мастера

jQuery, php, CSS и немножко SEO



Архив для категории: ‘HTML’

HTML vs Jquery

Вторник, марта 24, 2009

В этой статье я расскажу как сделать простейшую галерею на html. Название “HTML vs Jquery” ,безусловно преувеличено. Чистый html
не пожет конкурировать как с jquery, так и с другими библиотеками, но всё зависит от поставленной задачи.
Если нам необходимо сделать просто прокрутку изображений, тогда конечно самым простым способом будет использование HTML-тэга marquee. И если нам будет необходимо использовать управление галереей, тогда нам не обойтись без небольших javascript‘ов.

Пример того, что у меня получилось:

Галерея на HTML

Галерея на 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)

Юзайте на здоровье

Google Bookmarks Digg I.ua Linkstore Myscoop Communizm Ru-marks Webmarks Ruspace Linkomatic Kli.kz Web-zakladka Zakladok.net Reddit delicious Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Если Вам понравилась эта статья,
подпишитесь на RSS !