B backstage Registered 21 Юли 2011 #1 Колеги, как да направя следното: имам за интро страница една картинка изобразяваща предмет искам при клик картинката да се разделя на две и да се друпват двете половини на страни и да се отваря заглаваната страница Как мога да направя това?
Колеги, как да направя следното: имам за интро страница една картинка изобразяваща предмет искам при клик картинката да се разделя на две и да се друпват двете половини на страни и да се отваря заглаваната страница Как мога да направя това?
H hpstuff Registered 22 Юли 2011 #2 Трудно. Не можеш за разцепиш картинка може да пробваш нещо такова: [js] $(function(){ $('.img').click(function(){ $(this).find('.left').animate({'left' : '-400px', 'opacity' : '0'},300); $(this).find('.right').animate({'right' : '-400px', 'opacity' : '0'}, 300, function (){ window.location = "http://abv.bg"; }); }); }); [/js] [css] .img { width: 400px; height: 200px; margin: 0 auto; position: relative; } .img .left { width: 200px; height: 200px; left: 0; overflow: hidden; position: absolute; } .img .right { width: 200px; right: 0; height: 200px; overflow: hidden; position: absolute; } .img .right img { position: absolute; right: 0; } .img .left img { position: absolute; left: 0; } [/css] HTML: <div class="img"> <div class="left"> <img src="http://dummyimage.com/400x200" alt="" /> </div> <div class="right"> <img src="http://dummyimage.com/400x200" alt="" /> </div> </div>
Трудно. Не можеш за разцепиш картинка може да пробваш нещо такова: [js] $(function(){ $('.img').click(function(){ $(this).find('.left').animate({'left' : '-400px', 'opacity' : '0'},300); $(this).find('.right').animate({'right' : '-400px', 'opacity' : '0'}, 300, function (){ window.location = "http://abv.bg"; }); }); }); [/js] [css] .img { width: 400px; height: 200px; margin: 0 auto; position: relative; } .img .left { width: 200px; height: 200px; left: 0; overflow: hidden; position: absolute; } .img .right { width: 200px; right: 0; height: 200px; overflow: hidden; position: absolute; } .img .right img { position: absolute; right: 0; } .img .left img { position: absolute; left: 0; } [/css] HTML: <div class="img"> <div class="left"> <img src="http://dummyimage.com/400x200" alt="" /> </div> <div class="right"> <img src="http://dummyimage.com/400x200" alt="" /> </div> </div>