Chào các bạn, blog hôm nay mình sẽ giới thiệu cho các bạn một số hiệu ứng slide trong jQuery và hướng dẫn tạo 1 slide đơn giản. Mong rằng blog của mình sẽ hữu ích với các bạn ! Trước tiên bạn chèn jQuery vào tài liệu html của mình Giới thiệu về jQuery. Chú ý là phải đặt như sau:

http://js/jquery-3.1.1.min.js
http://js/main.js

Screenshot (150).png

I. Giới thiệu một số hiệu ứng slide trong jQuery.

1. slideDown();

Cú pháp : 

$(selector).slideDown(speed,callback);

Vd:

$("flip").click(function(){

$("#panel").slideDown();

});

Vd 2:

HTML :

Capture1.JPG

CSS: 

#panel, #flip {
 padding: 5px;
 text-align: center;
 background-color: #e5eecc;
 border: solid 1px #c3c3c3;
}

#panel {
 padding: 50px;
 display: none;
}

jQuery:   

$(document).ready(function(){
 $("#flip").click(function(){
 $("#panel").slideDown("slow");
 });
});

2.slideUp();

Cú pháp : 

$(selector).slideUp(speed,callback);

Vd:

$("#flip").click(function(){
    $("#panel").slideUp();
});

Vd2:

HTML :

Capture0.JPG

CSS :

#panel, #flip {
 padding: 5px;
 text-align: center;
 background-color: #e5eecc;
 border: solid 1px #c3c3c3;
}

#panel {
 padding: 50px;
}

jQuery:   

$(document).ready(function(){
 $("#flip").click(function(){
 $("#panel").slideUp("slow");
 });
});

3.slideToggle() ;

Cú pháp : 

$(selector).slideToggle(speed,callback);

Vd:

$("#flip").click(function(){
    $("#panel").slideToggle();
});

Vd2:

HTML :

Capture.JPG

CSS:

#panel, #flip {
 padding: 5px;
 text-align: center;
 background-color: #e5eecc;
 border: solid 1px #c3c3c3;
}

#panel {
 padding: 50px;
 display: none;
}

jQuery:   

$(document).ready(function(){
 $("#flip").click(function(){
 $("#panel").slideToggle("slow");
 });
});

4. Một sốjQuery Effects .

  • jQuery animate() Method

$("button").click(function(){
     $("#box").animate({height: "300px"});
});
  • jQuery clearQueue() Method

    $("button").click(function(){
        $("div").clearQueue();
    });
    
  • jQuery dequeue() Method

$("div").queue(function(){
    $("div").css("background-color", "red"); 
    $("div").dequeue();
});
  • jQuery fadeToggle() Method

$("button").click(function(){
    $("#div1").fadeToggle();
});
  • jQuery finish() Method

$("#complete").click(function(){
    $("div").finish();
});
  • jQuery hide() Method

$("button").click(function(){
    $("p").hide();
});
  • jQuery queue() Method

$("span").text(div.queue().length);
  • jQuery Effect show() Method

$("button").click(function(){
    $("p").show();
});
  • jQuery stop() Method

$("#stop").click(function(){
    $("div").stop();
});
  • jQuery toggle() Method

$("button").click(function(){
    $("p").toggle();
});

II. HƯớng dẫn tạo một slide đơn giản bằng jQuery.

1. Slide đơn giản .

file js :

file ảnh :

HTML:

Screenshot (153).png

CSS : 

#fpt-slider{
 margin-right: auto;
 margin-left: 500px;
 width: 720px; 
}
#fpt-slider img{
 -webkit-box-shadow: 9px 5px 28px 10px rgba(0,0,0,0.75);
 -moz-box-shadow: 9px 5px 28px 10px rgba(0,0,0,0.75);
 box-shadow: 9px 5px 28px 10px rgba(0,0,0,0.75);
 -webkit-transition: 1s;
 transition: 1s;
 top: 100px;
 
}
#fpt-slider>a.left{
 position: absolute;
 top:260px;
 left: 475px;
 color: #000;
 text-decoration: none;
 font-size: 20px;
 font-weight: bold; 
}
#fpt-slider>a.right{
 position: absolute;
 top:260px;
 right: 420px;
 color: #000;
 text-decoration: none;
 font-size: 20px;
 font-weight: bold; 
}
#fpt-slider>h2{
 color: black;
 position: absolute;
 top:470px;
 left: 610px;
 width: 700px;
 text-shadow: 6px 6px 6px rgba(150, 150, 150, 0.8);
 font-size: 30px;
 font-family: 'Pacifico', cursive;
 opacity: 0.9;
}
#fpt-slider ul{
 display: none;
}

jQuery :

$(document).ready(function(){
 var current=0;
 var max=$('li.item').length-1;
 //console.log(max);
 function display(){
 var currentItem=$('.item')[current];
 var html=$(currentItem).html();
 var img=$(currentItem).attr('data-img');
 
 $('#fpt-slider>h2').html(html); 
 $('#fpt-slider>img').attr('src',img);
 

 }
 $('a.left').click(function(event){
 if(current===0){
 current=max;
 }else{ 
 current--;
 }
 display(); 
 //console.log("noi dung" +html);
 //console.log("img: "+img);
 event.preventDefault(); /* Tắt chuyển # */
 });
 $('a.right').click(function(event){
 if(current===max){
 current=0;
 }else{ 
 current++;
 }
 display();
 
 event.preventDefault();
 });


 //setInterval(function(){
 // $('a.right').click();
 //})1000s;
});

2. slide đẹp.

screenshot-150

File : /html/css/jQuery

Advertisements