Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.03.2010, 23:00
Новичок на форуме
Отправить личное сообщение для kain Посмотреть профиль Найти все сообщения от kain
 
Регистрация: 24.03.2010
Сообщений: 2

Помощь в реализации и оптимизации (слои, картинки, анимация)
Доброго времени суток,
есть следующая задача и есть блин комом, требуется наставление в реализации
Имеется:
1)картинка для фона, width=100% (растягиваемость на любом разрешении, но реализация стремает)
2)картинки облак (3-4 шт) двигаются каждая со своей скорость и направлением (по горизонтали, но не на 1 прямой, в примере 2шт )
3)картинка подсолнух для фона меню, появление при hover на облаках(эффект zoom, увеличение в пропорциях(с 50x50px до 200x200px) в 1 точке)
Каждый из пунктов выше - более менее добился, но в соло исполнении. При попытках все это собрать переломал об лоб 10-ки граблей.. сам код и и линк.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  
<title>Подсолнухи</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script language="javascript">
<!--
$(function(){
	$('.zoom').hover(function(){
			$(this).stop().animate({width:"50px",height:"50px",paddingTop:"200px",paddingLeft:"200px"}, 400);
		},
		function(){
			$(this).stop().animate({width:"445px",height:"443px",paddingTop:"0",paddingLeft:"0"}, 400);
		});
});

	var http='', imgs=["obl1.png"],imgs2=["obl2.png"];
   function load(){
       var i=1,roller=document.getElementById('roller'),
		 roller2=document.getElementById('roller2');
    while(i--){ // 1 раз
    for(var x=0;x<imgs.length;x++) {
       var el=document.createElement('div'),
		  el2=document.createElement('div2'),
       el=roller.appendChild(el),
        el2=roller2.appendChild(el2);
        el.style['backgroundImage']='url('+http+imgs[x]+')'
        el2.style['backgroundImage']='url('+http+imgs2[x]+')'
    }}
	setInterval(moveit,40);

}

function moveit(){
	var x=document.getElementById('roller'),
	m=parseInt(x.style.marginLeft||0);
		if(m<(-382)*imgs.length) m=800; 
		x.style.marginLeft=m-1+'px';//скорость ветра :)

	var x2=document.getElementById('roller2'),
	m2=parseInt(x2.style.marginLeft||0);
		if(m2<(-382)*imgs.length) m2=500; 
		x2.style.marginLeft=m2-1+'px';
	}
-->
</script>

<style type="text/css">
   #fon {
	z-index: -1; 
	width: 100%; 
	height: 100%;
	position: absolute;
	left: 0; 
	top: 0; 
	margin: 0px;
	}
   #root {
	z-index: 1;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	margin: 0px;
	}
	#roller div{
	width:382px;
	height:325px;
	float:none;
	z-index: 5;
	background-repeat:no-repeat;
	}
	#roller2 div2{
	width:382px;
	height:325px;
	float:none;
	z-index: 6;
	background-repeat:no-repeat;
	}
  </style>
</head>
<body style="margin: 0px" onLoad="load()">
 <div id="fon" >
<img  src="fon.png" width="100%" alt="" border="0"/>
 </div >
 <div id="root" >
  <div id="roller">
  </div>
  <div id="roller2">
  </div>
 <div class="zoom" style="position: absolute; width: 445px; height: 443px; z-index: 1; top: 100px; left: 300px; " id="layer1">
 <img  border="0" src="podsolnuh.png" style="padding-top:0px; padding-left:0px" width="100%" height="100%" /> 
  </div>
 </div>
</body>
</html>
кто то скажет все работает, укажу все грабли:
1)если включен фон (вот этот src="fon.png") то у странички резкий аппетит возрастает к ресурсам.(у меня память 768mb проц P4-1.7Ghz стремится к ~100%)
2)фон (что в 1 граблях) становится самым высоким слоем картинкой и вызывает по пкм(правая кнопка мыши) меню для картинок - очень не этично ...
3) слой с меню подсолнухом перекрывает слои облаков хотя z-index у него ниже
4) двигается два облака (картинки одинаковые) после первого цикла у них становятся разными точки отсчета m (m=800, m2=500) - одно из них не проявляется никак , не могу изменить линию по которой они двигаются , сделать выше ниже относительно друг друга(хотя бы).
5) после решения первых 4 граблей, вполне вероятны грабли с относительностью всех элементов на странице - а именно реализация стиля под разные разрешения мониторов (т.е. меню должно быть всегда в % отношении на общем фоне, правее и ниже горизонта(картинки)) облака понятное дело в небе, а не падать на поле.

сам линк на тестовую страничку http://freedom.kolo.me/test/ , спс всем кто откликнется.
Ответить с цитированием
  #2 (permalink)  
Старый 29.03.2010, 18:22
Новичок на форуме
Отправить личное сообщение для kain Посмотреть профиль Найти все сообщения от kain
 
Регистрация: 24.03.2010
Сообщений: 2

up чоле (
Ответить с цитированием
Ответ



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

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