Доброго времени суток,
есть следующая задача и есть блин комом, требуется наставление в реализации
Имеется:
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/ , спс всем кто откликнется.