Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.12.2013, 20:32
Кандидат Javascript-наук
Отправить личное сообщение для koeshiro Посмотреть профиль Найти все сообщения от koeshiro
 
Регистрация: 05.12.2012
Сообщений: 125

"Зебра" на javascript
Сегодня вечером для портфолио решил накатать простенький(Как мне показалось скрипт) но столкнулся с проблемой. Для начала вот сам скрипт и html разметочка.
<!DOCTYPE html>
<html>
<head>
	<script>
	function zebra_animate(img_src){
	var i=0;
	var zebrawidth=screen.width/20;
	var html="";
	while(i<20){
		html+='<div class="zebra" style="position:fixed; top:0; z-index:'+(1*i)+'; left:'+(zebrawidth*i)+'px; width:'+zebrawidth+'px; height:'+screen.height+'px"><img src="'+img_src+'" style="position:fixed; top:0;"/></div>';
		i++;
	}
	document.write(html);
	}
	</script>
<style>
	.zebra{float:left;border: inset 1px black;}
</style>
</head><body>
<A Href="javascript:window.external.AddFavorite
  ('http://kimsite.narod.ru','Все для web-мастера')">
    Добавить в Избранное</A>
	<script>
		zebra_animate('http://gallery.sevstar.net/bPIC/201202/201202378908.jpg');
	</script>
</body></html>

Смысл всего кода в том что бы создавать картинки которые должны были бы дружно выстраиваться друг за дружкой показывая определённую часть одной картинки. (Планировал в будущем сделать красивую анимацию всего этого) Думал использовать отрицательное позиционирование, z-index но не вышло. Не подскажете, в чём же моя ошибка?

Последний раз редактировалось koeshiro, 18.12.2013 в 20:41.
Ответить с цитированием
  #2 (permalink)  
Старый 19.12.2013, 15:13
Кандидат Javascript-наук
Отправить личное сообщение для koeshiro Посмотреть профиль Найти все сообщения от koeshiro
 
Регистрация: 05.12.2012
Сообщений: 125

Никто не знает?
Ответить с цитированием
  #3 (permalink)  
Старый 19.12.2013, 15:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

koeshiro,
может вы опишите что вы считаите ошибкой? или скриншот со стрелочками покажите
Ответить с цитированием
  #4 (permalink)  
Старый 19.12.2013, 17:23
Кандидат Javascript-наук
Отправить личное сообщение для koeshiro Посмотреть профиль Найти все сообщения от koeshiro
 
Регистрация: 05.12.2012
Сообщений: 125

рони,
мою ошибку вы можете посмотреть при помощи кнопочки Просмотр(В любом браузере одно и тоже. А что должно получиться? Целая картинка сложенная из нескольких div блоков. Зачем? Во славу сатане!) А на самом деле просто задумал сделать слайдер с "прибамбасом" но понял что просто не знаю и не понимаю как такое делать.
P.S. Спасибо, в какой раз вы помогаете)
Ответить с цитированием
  #5 (permalink)  
Старый 19.12.2013, 18:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

koeshiro,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <style type="text/css">
.zebra{
  overflow: hidden;
  position: relative;
  padding: 0px;
  margin: 0px;
  float:left;
  border: inset 1px black;
}
 </style>
	<script>
	function zebra_animate(img_src){
	var i=0;
	var zebrawidth=document.documentElement.clientWidth/20 - 4;
	var html="";
	while(i<20){
		html+='<div class="zebra" style="width:'+zebrawidth+'px;height:'+(document.documentElement.clientHeight-30)+'px;"><img src="'+img_src+'" height="'+(document.documentElement.clientHeight-30)+'" width="'+(document.documentElement.clientWidth-30)+'"  style="left: -'+(zebrawidth*i)+'px;position: relative;"/></div>';
		i++;
	}
	document.write(html);
	}
	</script>
</head><body>
<A Href="javascript:window.external.AddFavorite
  ('http://kimsite.narod.ru','Все для web-мастера')">
    Добавить в Избранное</A><br>
	<script>
		zebra_animate('http://gallery.sevstar.net/bPIC/201202/201202378908.jpg');
	</script>

</body></html>

Последний раз редактировалось рони, 19.12.2013 в 18:27.
Ответить с цитированием
  #6 (permalink)  
Старый 19.12.2013, 18:21
Кандидат Javascript-наук
Отправить личное сообщение для koeshiro Посмотреть профиль Найти все сообщения от koeshiro
 
Регистрация: 05.12.2012
Сообщений: 125

рони, вот спасибо. Понял принцип =)
Ответить с цитированием
  #7 (permalink)  
Старый 19.12.2013, 18:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

koeshiro,
правил -- картинку увеличивал до размера видимой части смотрите окончательный вариант - пропорции конечно нарушаются а иначе картинки нехватит на всю область видимого
Ответить с цитированием
  #8 (permalink)  
Старый 19.12.2013, 18:58
Кандидат Javascript-наук
Отправить личное сообщение для koeshiro Посмотреть профиль Найти все сообщения от koeshiro
 
Регистрация: 05.12.2012
Сообщений: 125

Сообщение от рони Посмотреть сообщение
koeshiro,
правил -- картинку увеличивал до размера видимой части смотрите окончательный вариант - пропорции конечно нарушаются а иначе картинки не хватит на всю область видимого
Так ведь просто можно сделать сравнение частей (По экрану и туже часть по размеру картинки и подогнать div)
Хотя не стоит=)
Спасибо.

Последний раз редактировалось koeshiro, 19.12.2013 в 19:03.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Книга: JavaScript. Сильные стороны Magneto Учебные материалы 16 21.04.2013 15:28
Интерпретатор Java на JS kobezzza Оффтопик 24 11.10.2012 18:32
Первый Moscow JavaScript Meetup korenyushkin Общие вопросы Javascript 0 26.07.2011 15:23
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34