"Зебра" на 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,
может вы опишите что вы считаите ошибкой? или скриншот со стрелочками покажите |
рони,
мою ошибку вы можете посмотреть при помощи кнопочки Просмотр(В любом браузере одно и тоже. А что должно получиться? Целая картинка сложенная из нескольких div блоков. Зачем? Во славу сатане!) А на самом деле просто задумал сделать слайдер с "прибамбасом" но понял что просто не знаю и не понимаю как такое делать. P.S. Спасибо, в какой раз вы помогаете) |
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>
|
рони, вот спасибо. Понял принцип =)
|
koeshiro,
правил -- картинку увеличивал до размера видимой части смотрите окончательный вариант - пропорции конечно нарушаются а иначе картинки нехватит на всю область видимого |
Цитата:
Хотя не стоит=) Спасибо. |
| Часовой пояс GMT +3, время: 19:42. |