Dec 23 2011

Уеб дизайн с jquery

Автор:

Това е описание на някои полезни ефекти, които могат да се използват при уеб дизайн.

1. Плъзгащ се панел.

Първо трябва да включиме библиотеката jquery, някъде между <head> и </head> например чрез: <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js” type=”text/javascript”></script>

Когато кликнете върху елемент с class=”button”, това ще плъзне елемента с <div id=”panel”> и ще превключи CSS class = “active” на елемента  <a>

Класът .active ще смени background-position на стрелката ( ще я обърне нагоре чрез CSS):

http://gmc-bg.com/images/slidepanel.jpg

Ето и скрипта за това:

$(document).ready(function(){ 
        $(".button").click(function(){
          $("#panel").slideToggle("slow");
          $(this).toggleClass("active");
        });        
}); 
Това е и HTML кода: 

<div id=”panel”>

<!–тук стои вашето съдаржание –>

</div>

<p><a href=”#”>Slide Panel</a></p>

2. Изчезващ ефект.

В този пример ще разгледаме как може да накараме да изчезне даден елемент, когато се кликне върху image-бутон.

Когато се кликне върху <img>, скрипта ще намери неговия родителски елемент <div> и ще анимира неговата opacity=hide със скороста с която желаем (в примера slow):

 

http://gmc-bg.com/images/delitepanel.jpg

$(document).ready(function(){

        $(".pane .delete").click(function(){
          $(this).parents(".pane").animate({ opacity: "hide" }, "slow");
        });        
});

HTML:

<div class=”pane”>

<img class=”delete” alt=”delete” src=””></div>

 

3. Ефект на верижна анимация

В този ефект ще видим как само с няколко реда код можем да накараме обект да се движи, променяики размерите си.

http://gmc-bg.com/images/multi-animation.gif

Line 1: Когато кликнем на <a>

Line 2: анимира се <div id=”box”> с opacity=0.1, свойството left докато достигне 400px (обекта се премества надясно с 400px), а скороста е 1200 (милисекунди)

Line 3: opacity=0.4, top=160px, height=20, width=20, а скоростта е “slow” – Тук освен прозрачността на обекта се променят неговото свойство top (премества се вертикално на екрана),  а също така се променят и неговите размери.

Line 4: opacity=1, а свойствата left, height и width, приемат стойности съответно: 0, 100px и 100px, като скоростта отново е slow.

Line 5: opacity=1, а свойствата left, height и width, приемат стойности съответно: 0, 100px и 100px, като скоростта отново е slow.

Line 6: тук свойството top приема стойност 0 със скорост 0. (top=0).

Line 7: тук имаме slideUp (скорост default speed = “normal”)

Line 8: тук имаме slideDown със скорост “slow”.

Ето и самия код:

$(document).ready(function(){ $(".run").click(function(){
 $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
.animate({top: "0"}, "fast")
.slideUp()
.slideDown("slow")
return false;
  });
 });
примерен HTML: <p><a class="run" href="#">Run</a></p>

<div id=”box”> </div>

 

4. Примерен ефект на “акордеон”

http://gmc-bg.com/images/accordeon.jpg

Line 1 от кода добавя CSS клас “active” към първия <H3> елемент намиращ се в <div class=”accordion”>

(Класът .active ще премести свойството background-position на стрелката. )

Line 2:  Скрива всичките <p> елементи които не са първи в  <div class =”accordion”>

 

Когато се кликне върху <H3> елемента, тогава се прилага slideToggle на следващия <p> елемент.

 

$(document).ready(function(){

$(“.accordion h3:first”).addClass(“active”);

$(“.accordion p:not(:first)”).hide();

$(“.accordion h3”).click(function(){

$(this).next(“p”).slideToggle(“slow”)

.siblings(“p:visible”).slideUp(“slow”);

$(this).toggleClass(“active”);

$(this).siblings(“h3”).removeClass(“active”);

});

});

 

ето и примерен HTML:

<div class=”accordion”>

<h3 class=”active”> Heading 1</h3>

<p>Lorem ipsum dolor sit amet……</p>

<h3> Heading 2</h3>

<p style=”display: none;”>Lorem ipsum dolor sit amet…</p>

<h3> Heading 3</h3>

<p style=”display: none;”>Lorem ipsum dolor sit amet…..</p>

<h3>Heading 4 </h3>

<p style=”display: none;”>Lorem ipsum dolor sit amet …..</p>

<h3> Heading 5</h3>

<p style=”display: none;”>Lorem ipsum dolor sit amet…..</p>

</div>

 

 

Rate this post