CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 293   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

2

Открывающиеся закрывающиеся перетаскиваемые блоки

Jemand 10295 , ,
CSS, JavaScript

1. CSS

.window {
	border: solid 6px #343434;
	background: #fff;
	width: 200px;
	height: 150px;
	display: none;
	}
.msg {
	float: center;
	font-weight: normal;
	font-size: 11px;
	}

2. Подключение MooTools

<script type="text/javascript" src="mootools.svn.js"></script>

Данный код размещаем в разделе <head> Вашей страницы.
Скачать MooTools можно здесь.
3. JavaScript

<script type="text/javascript">
window.addEvent('domready', function(){
	$$('#draggables div').each(function(drag){
		new Drag.Move(drag);
	});
	$$('#draggables span a').each(function(o){
		$(o).addEvents({'click' : function(event){
		$(o.id+'_w').setStyle('display', 'none');
	}
	})
	});
	$$('#links a').each(function(o){
		$(o).addEvents({'click' : function(event){
		$(o.id+'_w').setStyle('display', 'block');}
   	})
	});
});
</script>

JavaScript размещаем там же в <head> но после кода подключения MooTools.
4. HTML

<div id="links">
	<a href="#" id="block1">Клик для показа блока №1</a>
	<a href="#" id="block2">Клик для показа блока №2</a>
</div>
<div id="draggables">
	<div id="block1_w" class="window">
		<span class="msg"><a href="#" id="block1">закрыть</a></span>
		<p>Текст блока №1</p>
	</div>
	<div id="block2_w" class="window">
		<span class="msg"><a href="#" id="block2">закрыть</a></span>
		<p>Текст блока №2</p>
	</div>
</div>

Демо

Рекламная пауза

» 2 комментария

  1. А как сделать чтоб блоки исчезали через какоето время сами?


Оставить комментарий