Сообщение оставлено 08.09.2011 в 18:26:31 | Сообщение #
1
Пользователь Пользователь проекта, который не имеет никаких привилегий.
К сожалению, пользователь контактные данные не указал.
К сожалению, пользователь данные о WMID не указал.
Подключаем jQuery в HEAD сайта где будут находиться баннера. Code
<script src="http://webo4ka.ru/Ucoz4/jquery-1.3.1.min.js"></script> <script src="http://webo4ka.ru/Ucoz4/jquery.easing.1.3.js"></script>
Если данные библиотеки уже подключены их дважды подключать не нужно. Далее сам код JS который отвечает за эффект Code
<script> $(document).ready(function() { var style_in = 'easeOutBounce'; var style_out = 'jswing'; var speed_in = 1000; var speed_out = 300; var neg = Math.round($('.qitem').width() / 2) * (-1); var pos = neg * (-1); var out = pos * 2; $('.qitem').each(function () { url = $(this).find('a').attr('href'); img = $(this).find('img').attr('src'); alt = $(this).find('img').attr('img'); $('img', this).remove(); $(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>'); $(this).children('div').css('background-image','url('+ img + ')'); $(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos}); $(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos}); $(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos}); $(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos}); }).hover(function () { $(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out}); $(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out}); $(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out}); $(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out}); }, function () { $(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in}); $(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in}); $(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in}); $(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in}); }).click (function () { window.location = $(this).find('a').attr('href'); }); }); </script>
Это в Ваш CSS : Code
.qitem {width:125px;height:125px;border:4px solid #222;margin:2;background: url('http://webo4ka.ru/Ucoz4/effekt_dli_reklami125.gif') no-repeat;overflow:hidden;cursor:hand;position:relative;float:left;cursor:pointer;} .qitem img {border:0;position:absolute;z-index:200;} .qitem .caption {position:absolute;z-index:0;color:#ccc;display:block;} .qitem .caption h4 {font-size:14px;padding:10px 5px 0 8px;margin:0;color:#CCD718;} .qitem .caption p {font-size:12px;padding:3px 5px 0 8px;margin:0;} .topLeft, .topRight, .bottomLeft, .bottomRight {position:absolute;background-repeat: no-repeat;float:left;} .topLeft {background-position: top left;} .topRight {background-position: top right;} .bottomLeft {background-position: bottom left;} .bottomRight {background-position: bottom right;}
Сам код для баннера : Code
<div class="qitem"> <a href="http://webo4ka.ru/"><img src="http://webo4ka.ru/Ucoz4/effekt_dli_reklami125cbfd05f8effc.png" width="125" height="125"/></a> <span class="caption"><h4>webo4ka.ru</h4><p>Макет и Верстка, разработка сайтов, только для uCoz конструктора.</p></span> </div> <div class="qitem"> <a href="http://webo4ka.ru/"><img src="http://webo4ka.ru/Ucoz4/effekt_dli_reklami125125X125-v3.png" width="125" height="125"/></a> <span class="caption"><h4>webo4ka.ru</h4><p>Только новые, и только уникальные скрипты для uCoz системы.</p></span> </div>
Источник: up-script.ru
Сообщение оставлено 08.09.2011 в 18:26:31 | Сообщение #
1
Ребенок моё счастье
Сообщения: 2324
Подключаем jQuery в HEAD сайта где будут находиться баннера. Code
<script src="http://webo4ka.ru/Ucoz4/jquery-1.3.1.min.js"></script> <script src="http://webo4ka.ru/Ucoz4/jquery.easing.1.3.js"></script>
Если данные библиотеки уже подключены их дважды подключать не нужно. Далее сам код JS который отвечает за эффект Code
<script> $(document).ready(function() { var style_in = 'easeOutBounce'; var style_out = 'jswing'; var speed_in = 1000; var speed_out = 300; var neg = Math.round($('.qitem').width() / 2) * (-1); var pos = neg * (-1); var out = pos * 2; $('.qitem').each(function () { url = $(this).find('a').attr('href'); img = $(this).find('img').attr('src'); alt = $(this).find('img').attr('img'); $('img', this).remove(); $(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>'); $(this).children('div').css('background-image','url('+ img + ')'); $(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos}); $(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos}); $(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos}); $(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos}); }).hover(function () { $(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out}); $(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out}); $(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out}); $(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out}); }, function () { $(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in}); $(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in}); $(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in}); $(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in}); }).click (function () { window.location = $(this).find('a').attr('href'); }); }); </script>
Это в Ваш CSS : Code
.qitem {width:125px;height:125px;border:4px solid #222;margin:2;background: url('http://webo4ka.ru/Ucoz4/effekt_dli_reklami125.gif') no-repeat;overflow:hidden;cursor:hand;position:relative;float:left;cursor:pointer;} .qitem img {border:0;position:absolute;z-index:200;} .qitem .caption {position:absolute;z-index:0;color:#ccc;display:block;} .qitem .caption h4 {font-size:14px;padding:10px 5px 0 8px;margin:0;color:#CCD718;} .qitem .caption p {font-size:12px;padding:3px 5px 0 8px;margin:0;} .topLeft, .topRight, .bottomLeft, .bottomRight {position:absolute;background-repeat: no-repeat;float:left;} .topLeft {background-position: top left;} .topRight {background-position: top right;} .bottomLeft {background-position: bottom left;} .bottomRight {background-position: bottom right;}
Сам код для баннера : Code
<div class="qitem"> <a href="http://webo4ka.ru/"><img src="http://webo4ka.ru/Ucoz4/effekt_dli_reklami125cbfd05f8effc.png" width="125" height="125"/></a> <span class="caption"><h4>webo4ka.ru</h4><p>Макет и Верстка, разработка сайтов, только для uCoz конструктора.</p></span> </div> <div class="qitem"> <a href="http://webo4ka.ru/"><img src="http://webo4ka.ru/Ucoz4/effekt_dli_reklami125125X125-v3.png" width="125" height="125"/></a> <span class="caption"><h4>webo4ka.ru</h4><p>Только новые, и только уникальные скрипты для uCoz системы.</p></span> </div>
Источник: up-script.ru