Скрипты и коды для юкоз

Страница 1 из 2
1
2
»

Анимационный эффект выдвигающегося блока инфы

[1] likbezz [30.08.2011, 11:06]

Анимационный эффект выдвигающегося блока инфы (infoblock $.animate())

Вариант №1. Играемся с width и opacity

CSS

Code

JavaScript

Code

HTML

Code

<div id="block"><a href="javascript://" onclick="onShow('id0');return false;">Инфо</a>
<div class="infoblock" id="id0"><img class="imgLeft" src="/_example/_img/_girls/aj_170x140.jpg" width="170" height="140" alt="AJ" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
</div>

Вариант №2. Играемся с width, opacity и left

CSS

Code

JavaScript

Code

HTML

Code

<div id="block"><a href="javascript://" onclick="onShow1('id1');return false;">Инфо</a>
<div class="infoblock" id="id1"><img class="imgLeft" src="/_example/_img/_girls/aj_170x140.jpg" width="170" height="140" alt="AJ" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
</div>

☑ Пример ... (оба варианта) ...
...

Code

<div class="exText">
  <h3>Вариант №1</h3>

<style type="text/css">
#block{position:relative;width:350px;margin:0 auto;}
.infoblock{height:300px;width:0px;float:left;position:absolute;overflow:hidden;filter:alpha(opacity=0);opacity:0;background-color:#f4f4f4;}
#id0{left:220px;}
</style>
<script type="text/javascript">
function onShow(id){var obj=$('#'+id);
if(obj.width()=='0'){obj.animate({width:'350px',opacity:'1'},1000)}
else{obj.animate({width:'0px',opacity:'0'},1000)}};
</script>
<div id="block"><a href="javascript://" onclick="onShow('id0');return false;">Инфо</a>
<div class="infoblock" id="id0"><img class="imgLeft" src="/_example/_img/_girls/aj_170x140.jpg" width="170" height="140" alt="AJ" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</div>
</div>

</div>
<hr />
<div class="exText">
<h3>Вариант №2</h3>

<style type="text/css">
#id1{left:0px;}
</style>
<script type="text/javascript">
function onShow1(id){var obj=$('#'+id);
if(obj.width()=='0'){obj.animate({width:'350px',opacity:'1',left:'220px'},1000)}
else{obj.animate({width:'0px',opacity:'0',left:'0px'},1000)}};
</script>
<div id="block"><a href="javascript://" onclick="onShow1('id1');return false;">Инфо</a>
<div class="infoblock" id="id1"><img class="imgLeft" src="/_example/_img/_girls/aj_170x140.jpg" width="170" height="140" alt="AJ" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</div>
</div>

</div>

Прикрепления: infoblock.rar (2.9 Kb)

[2] likbezz [30.08.2011, 21:00]

Анимационный эффект выдвигающегося блока инфы (infoblock $.animate())

Вариант №3. Играемся с zIndex, opacity и left

CSS

Code

#block{position:relative;width:350px;margin:0 auto;}
.infoblock{height:300px;width:0px;float:left;position:absolute;overflow:hidden;filter:alpha(opacity=0);opacity:0;background-color:#f4f4f4;}
#id2{left:0;top:0;width:350px;z-index:-1;}

JavaScript

Code

HTML

Code

<div id="block"><a href="javascript://" onclick="onShow2('id2');return false;">Инфо</a>
<div class="infoblock" id="id2"><img class="imgLeft" src="/_example/_img/_girls/aj_170x140.jpg" width="170" height="140" alt="AJ" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
</div>

☑ Пример (все вместе, все три) ...

...

Прикрепления: infoblock_v0.rar (3.0 Kb)

[3] DesBR [31.08.2011, 16:48]

вот я дурень - все время ставил функцию появления и скрытия на разные блоки, забыл что можно использовать условие с распознаванием ширины например... спс, буду знать!)

[4] kimi [20.02.2012, 18:51]

Доброго времени суток.
подскажите, как сделать все тоже только открытие данного меню без клика а просто наведением курсора на текст.

[5] likbezz [20.02.2012, 19:01]

kimi,

Quote (kimi)

Добрый)
Вот так:

Code

...

[6] kimi [23.02.2012, 12:48]

Спасибо, не ожидал что так быстро отреагируете)))

Добавлено (23.02.2012, 12:48)
---------------------------------------------
Не люблю просить о помощи но мучаюсь второй день, навожу курсор на текст, как по выше указанному, блок выезжает и тут же прячется,

Code

<table style="border-image: initial; ">
   <tbody>
     <tr>
       <td style="border-image: initial; ">
         <p style="margin-bottom: 0.0001pt; " class="MsoNormal"><o:p> 
             <style type="text/css">#block{position:relative;width:350px;margin:0 auto;}
.infoblock{height:350px;width:0px;float:left;position:absolute;overflow:hidden;filter:alpha(opacity=0);opacity:0;background-color: #DCDCDC;}
#id0{left:0;top:0;width:350px;z-index:-1;}
             </style>
             <script type="text/javascript">function onShow0(id){var obj=$('#'+id);
if(obj.css('opacity')=='0'){obj.css({zIndex:'1'}).animate({opacity:'1',left:'280px'},1000)}
else{obj.animate({opacity:'0',left:'0px'},1000,function(){obj.css({zIndex:'-1'})})}};
             </script> </o:p></p>
         <div id="block"><a onclick="return false;" onmouseover="onShow0('id0');" onmouseout="onShow0('id0');" style="font-size: medium; ">Электротехнические материалы</a>
           <div id="id0" class="infoblock"><a href="/page/98">Технологии</a><br /><a href="/page/131">Каталог продукции</a><br /><a href="/page/132">Решение для горной промышленности</a><br /><a href="/page/133">Решение для строительства</a>
           </div>
         </div>
         <p> </p> </td>
     </tr>

[7] likbezz [23.02.2012, 20:27]

kimi,

Quote (kimi)

навожу курсор на текст, как по выше указанному, блок выезжает и тут же прячется,

А должно как?

[8] kimi [24.02.2012, 12:03]

Quote (likbezz)

Quote (kimi)
навожу курсор на текст, как по выше указанному, блок выезжает и тут же прячется,

А должно как?

Хочется чтобы оно выезжало и можно было легко пройти по ссылке которая в блоке

[9] likbezz [24.02.2012, 12:36]

kimi,

Quote (kimi)

Хочется чтобы оно выезжало и можно было легко пройти по ссылке которая в блоке

Code

... Вот только мне интересно, а как вы его закрывать будете? ) Или это не требуется?
...

[10] bandjuk [24.02.2012, 12:47]

likbezz, а может он имел ввиду, чтобы окно открывалось на определённое время?

[11] kimi [24.02.2012, 13:01]

Наверное я не тот скрипт взял за основу, я хочу сделать выезжающее меню со ссылками, как тут в верхней строке.

[12] bandjuk [24.02.2012, 14:29]

kimi, смотри в этой теме я себе меню сделал, там и пример есть.
Если подойдёт, дам исходник. Там скрипты не используются.
Пример меню

[13] kimi [24.02.2012, 14:56]

спасибо большое, решил остановиться на открытии блока по клику.

[14] likbezz [24.02.2012, 16:19]

kimi,

Quote (kimi)

Наверное я не тот скрипт взял за основу, я хочу сделать выезжающее меню со ссылками, как тут в верхней строке.

Там готовый скрипт есть - бери и пользуй )
Вот он: _http://novaposhta.ua/public/js/jquery.dropmenu.js ... (в прикреплении)
Так что) ... так.

Прикрепления: jquery.dropmenu.js (4.1 Kb)

[15] igrok [12.05.2012, 23:24]

Доброго времени суток!
Подскажите пожалуйста, - я использую принципиально похожий метод но, это вобщем конопка у меня smile

Т.Е. При наведении на область выежает меню, только вот не получается у меня засунуть туда текст, который и должен быть ссылкой...
вот то что я прописываю в css

Code

.demo {
display: block;
width: 220px;
height: 200px;
  position:relative;margin-top:50px; margin-left:0px;
    }
.demo { overflow:hidden;}

.demo img.dva, .demo:hover img.raz { margin-left: 0px; }
.demo:hover img.dva { margin-left: 220px; }
.demo img.raz { margin-left: -150px; }
.demo img {
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

и вот, то что в теле страницы

Code

<a class="demo" id="tri" href="#">
<img class="raz" src="http://my3d.3dn.ru/images/2.jpg" height="200" width="220" alt=""/> Catalog
<br/>
</a>

Не как не могу понять как в css или в теле сделать так что бы текст с ссылкой был внутри блока wacko

Добавлено (12.05.2012, 23:02)
---------------------------------------------
ссылка на сайт с этой кнопкой тэстовый сайт

Добавлено (12.05.2012, 23:24)
---------------------------------------------
p/s likbezz - У тебя имеются права админа на этом сайте

Страница 1 из 2
1
2
»