Các Hiệu ứng Slide Trong JQuery. - Viquynhh

Trang chủ » Các Hiệu ứng Jquery » Các Hiệu ứng Slide Trong JQuery. - Viquynhh

Có thể bạn quan tâm

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"); }); }); capture wp_20150331_003

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"); }); }); capture capture1

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"); }); }); capture capture1

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 :

1 2 3 4 screenshot-152 screenshot-151

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

Share this:

  • X
  • Facebook
Like Loading...

Related

Từ khóa » Các Hiệu ứng Jquery