Затемнение с центровкой картинки - JavaScript, Ajax

WennY · 28.11.2011, 17:34

Здравствуйте! Стоит задача объяснить юзеру, грузящему страницу, что жизнь после нажатия баттона продолжается и надо лишь подождать. Делается это посредством затемнения страницы и вывода по центру картинки с анимацией загрузки (в общем, ничего сверхъестественного). Сама проблема кроется в отцентровке этой самой картинки ровно по середине экрана браузера. Я уже просто замаялся, она отчего-то съезжает чуток вправо и вниз. Вставлял и свои и не очень свои наработки, все равно падла уезжает. В качестве примера даю исход затемнения со стандартной отцентровкой по ксс. Буду очень благодарен за помощь, мои силы иссякли..

Спасибо

Код:

<html>

<head>
<style type="text/css">
html, body {height:100%;margin:0;}

#test {
   background: #000;
   display: none;
   opacity: 0;
   filter: alpha(opacity=0);
   position: absolute;
   top: 0;
   left: 0;
   z-index: 100;
}

#mydiv {background:red;width:100px;height:100px;}

#warning { width: 100px; height: 30px; text-align: center; position: absolute; top: 50%; left: 50%; background: #fff; border: #f00 1px solid; z-index:101; display:none; }
</style>

<script>
    var value = 0;

    function setOpacity() {
       value += .3;
       var testObj = document.getElementById('test');
       
       testObj.style.width = "100%";
       testObj.style.height = "100%";
       testObj.style.display = "block";
       testObj.style.opacity = value/10;
       testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
       myTimeout = setTimeout("setOpacity()", 1);
       
       if ((value/10) >= .5) {
          clearTimeout(myTimeout);
       }
      document.getElementById('warning').style.display = "block";
    }

    function removeOpacity() {
       value -= .3;
       var testObj = document.getElementById('test');
       
       myTimeout2 = setTimeout("removeOpacity()", 1);
       testObj.style.opacity = value/10;
       testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
       
       if ((value/10) <= 0) {
          testObj.style.display = "none";
          clearTimeout(myTimeout2);
       }
      document.getElementById('warning').style.display = "none";
    }
</script>

</head>

<body>
<div id="test"></div>
   <div id="warning">
      <img src="http://personal-access.info/loading.gif" style="opacity: 1;"> 
</div>

<script>
setOpacity();
</script>
</body>
</html>

KPEATuBHO · 29.11.2011, 01:10

тут можно пойти 2-мя путями, либо прописать в стиля отрицательные отступы, в вашем случае:

Код:

margin-top:-15px;
margin-left:-50px;

либо центрировать JS-функцией вызыванной сразу же после того как <div id="warning"> становится display:block; Вот накидал небольшой пример того как можно отцентрировать JS'ом:

Код:

function centralizer(obj_id){
	document.getElementById(obj_id).style['left']=(document.documentElement.clientWidth-document.getElementById(obj_id).clientWidth)/2+"px";
	document.getElementById(obj_id).style['top']=(document.documentElement.clientHeight-document.getElementById(obj_id).clientHeight)/2+"px";
	window.addEventListener("resize",function(){
		document.getElementById(obj_id).style['left']=(document.documentElement.clientWidth-document.getElementById(obj_id).clientWidth)/2+"px";
		document.getElementById(obj_id).style['top']=(document.documentElement.clientHeight-document.getElementById(obj_id).clientHeight)/2+"px";	
	},false);	
}

как я и сказал функцию centralizer вызывать надо только после того как объект который надо централизовать - отображен. в качестве параметра функция принимает id центрируемого объекта, т.е. в вашем случае будет так:

Код:

<script>
setOpacity();
centralizer("warning");
</script>

WennY · 29.11.2011, 11:56

Спс, вот терь норм

Naive · 29.11.2011, 16:46

Еще пара способов:
1) развернуть блок на весь экран, а картинку разместить бэкграундом к нему:

Код:

background:url(mypic.png) no-repeat 50% 50%;

2) развернуть блок на весь экран, картинку швырнуть внутрь. Для самого блока:

Код:

display:table-cell; text-align:center; vertical-align:middle;

Хотя я бы в этом случае предпочел 1 вариант от KPEATuBHO

nerv · 29.11.2011, 22:34

В js я пока еще новичок, но могу дать следующую ссылку http://www.tigir.com/javascript.htm : )

frundik · 04.10.2012, 14:30

Для того что бы она была посередине экрана достаточно немного подправить CSS!
Вот так

Код HTML:

#warning { 
	width: 100px; 
	height: 30px; 
	text-align: center; 
	position: fixed; 
	top: 50%; 
	left: 50%;
	margin-top: -8px; /* 50% высоты */
	margin-left: -52px;  /* 50% ширины */ 
	background: #fff; 
	border: #f00 1px solid; 
	z-index:101; 
	display:none; 
}

Naive · 04.10.2012, 17:50

frundik ворвался спустя год и всех спас.
В ИЕ6 робить не будет

29.11.2011, 01:10	#2
KPEATuBHO Форумчанин Регистрация: 03.09.2010 Сообщений: 197	тут можно пойти 2-мя путями, либо прописать в стиля отрицательные отступы, в вашем случае: Код: `margin-top:-15px; margin-left:-50px;` либо центрировать JS-функцией вызыванной сразу же после того как <div id="warning"> становится display:block; Вот накидал небольшой пример того как можно отцентрировать JS'ом: Код: function centralizer(obj_id){ document.getElementById(obj_id).style['left']=(document.documentElement.clientWidth-document.getElementById(obj_id).clientWidth)/2+"px"; document.getElementById(obj_id).style['top']=(document.documentElement.clientHeight-document.getElementById(obj_id).clientHeight)/2+"px"; window.addEventListener("resize",function(){ document.getElementById(obj_id).style['left']=(document.documentElement.clientWidth-document.getElementById(obj_id).clientWidth)/2+"px"; document.getElementById(obj_id).style['top']=(document.documentElement.clientHeight-document.getElementById(obj_id).clientHeight)/2+"px"; },false); } как я и сказал функцию centralizer вызывать надо только после того как объект который надо централизовать - отображен. в качестве параметра функция принимает id центрируемого объекта, т.е. в вашем случае будет так: Код: `<script> setOpacity(); centralizer("warning"); </script>` быстрый хостинг. недорогие домены.

29.11.2011, 16:46	#4
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Еще пара способов: 1) развернуть блок на весь экран, а картинку разместить бэкграундом к нему: Код: `background:url(mypic.png) no-repeat 50% 50%;` 2) развернуть блок на весь экран, картинку швырнуть внутрь. Для самого блока: Код: `display:table-cell; text-align:center; vertical-align:middle;` Хотя я бы в этом случае предпочел 1 вариант от KPEATuBHO Alar, верни репу!

29.11.2011, 22:34	#5
nerv Форумчанин Регистрация: 26.04.2010 Сообщений: 450	В js я пока еще новичок, но могу дать следующую ссылку http://www.tigir.com/javascript.htm : ) Тишина – самый громкий звук

04.10.2012, 14:30	#6
frundik Новичок Джуниор Регистрация: 10.10.2008 Сообщений: 1	Не майтесь ерундой ! Для того что бы она была посередине экрана достаточно немного подправить CSS! Вот так Код HTML: #warning { width: 100px; height: 30px; text-align: center; position: fixed; top: 50%; left: 50%; margin-top: -8px; /* 50% высоты / margin-left: -52px; / 50% ширины */ background: #fff; border: #f00 1px solid; z-index:101; display:none; }

04.10.2012, 17:50	#7
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	frundik ворвался спустя год и всех спас. В ИЕ6 робить не будет Alar, верни репу!

29.11.2011, 11:56	#3
WennY Форумчанин Регистрация: 17.01.2008 Сообщений: 236	Спс, вот терь норм

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Затемнение фона	s24t	JavaScript, Ajax	3	05.07.2011 11:29
Затемнение TImage (яркость)	werrey	Общие вопросы Delphi	1	16.06.2011 20:57
Затемнение экрана	СисТемникс	Компьютерное железо	5	29.06.2010 06:25
Canvas затемнение	Лубышев	Общие вопросы Delphi	4	26.02.2010 13:26
Затемнение и осветление цветов.	proglamer	Мультимедиа в Delphi	1	02.12.2008 16:09