<style type="text/css"> #opakowanie { overflow:hidden; width:998px; border:1px solid rgb(0,0,0); } #zaw { float:right; width:824px; border:1px solid rgb(0,0,0); } #op { border:2px solid rgb(255,0,0); height:158px; width:500px; left:100px; } #zawartosc { border:2px solid rgb(0,255,0); height:154px; width:500px; left:100px; } #wew { position:relative; border:2px solid rgb(0,0,255); height:150px; width:780px; left:0px; } </style> <script language="javascript" src="jquery.js"></script> <script language="javascript"> var rozmiar=150; $(document).ready(function(){ $("#wew").width(1200); $("#go").click(function(){ if($("#zawartosc").offset().left+$("#zawartosc").width() >= $("#wew").offset().left+$("#wew").width()-rozmiar) { rozmiar=($("#zawartosc").offset().left+$("#zawartosc").width()) - ($("#wew").offset().left+$("#wew").width()); rozmiar= - rozmiar+12; } $("#wew").stop().animate( { left:$("#wew").offset().left-rozmiar+"px"}, 1000 ); rozmiar=150; }); $("#go2").click(function(){ if($("#zawartosc").offset().left <= $("#wew").offset().left+rozmiar) { rozmiar=$("#wew").offset().left - $("#zawartosc").offset().left; rozmiar= -rozmiar-8; } $("#wew").stop().animate( { left:$("#wew").offset().left+rozmiar+"px"}, 1000 ); rozmiar=150; }); }); </script> </head> <body> <div id="opakowanie"> <div id="zaw"> <div id="op"> <div id="strzalka1"> </div> <div id="zawartosc"> <div id="wew"> <img src="DB9+0.jpg" /> <img src="DB9+1.jpg" /> <img src="DB9+2.jpg" /> <img src="DB9+3.jpg" /> <img src="DB9+4.jpg" /> <img src="DB9+5.jpg" /> <img src="DB9+6.jpg" /> </div> </div> <div id="strzalka2"> </div> </div> </div> </div> <br /> <input type="button" id="go" value="przesun w lewo" /> <input type="button" id="go2" value="przesun w prawo" />
EDIT: W końcu udało mi się poprawić skrypt. Trzeba było odjąć jeszcze sumę diva #zaw oraz body w animate. W sumie wyszedł mi chyba mocno zakręcony skrypt, ale póki co mi wystarczy : )