Помощь в реализации и оптимизации (слои, картинки, анимация)
Доброго времени суток,
есть следующая задача и есть блин комом, требуется наставление в реализации:) Имеется: 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/ , спс всем кто откликнется. |
up чоле (
|
Часовой пояс GMT +3, время: 20:52. |