Tổng một vài đoạn jQuery hay, hữu ích được nhiều người sử dụng

jquery logo Tổng một vài đoạn jQuery hay, hữu ích được nhiều người sử dụng

Có lẽ đối với thì nó rất quen thuộc với tất cả mọi người với slogan quen thuộc: “Viết ít, làm nhiều” rồi. Hôm nay mình xin gửi các bạn những đoạn rất hữu ích và được sử dụng rất nhiều hiện nay mà mình tổng hợp được.

Hiệu ứng di chuyển tới  điểm neo #

Ứng dụng này bạn gặp rất nhiều và cũng được rất nhiều site đang sử dụng, trong đó kể đến là nút quay về đầu trang mỗi khi người dùng đang ở dưới chân trang, có 1 nút  khi click vào đó thì nó sẽ đưa người dùng lên đầu trang. Hoặc đối với 1 bài quá là dài, được chia làm nhiều phần thì cách hay nhất để liên kết trong bài viết là sử dụng id làm điểm neo cho từng phần đó. Với Jquery dưới sẽ giúp cho hiệu ứng di chuyển trở nên mượt mà hơn, đẹp mắt hơn

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// HTML:
// <h1 id="anchor">Lorem Ipsum</h1>
// <p><a href="#anchor">Back to Top</a></p>
$(document).ready(function() {
    $("a.topLink").click(function() {
        $("html, body").animate({
            scrollTop: $($(this).attr("href")).offset().top + "px"
        }, {
            duration: 500,
            easing: "swing"
        });
        return false;
    });
});

 

Sử dụng Jquery thay đổi kích thước ảnh

Đây là mã Jquery giúp bạn có thể thay đổi kích thước ảnh mặc dù việc thay đổi kích thước ảnh này bạn có thể dùng php để thay đổi được.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(window).bind("load", function() {
    // IMAGE RESIZE
    $('#product_cat_list img').each(function() {
        var maxWidth = 120;
        var maxHeight = 120;
        var ratio = 0;
        var width = $(this).width();
        var height = $(this).height();
        if(width > maxWidth){
            ratio = maxWidth / width;
            $(this).css("width", maxWidth);
            $(this).css("height", height * ratio);
            height = height * ratio;
        }
        var width = $(this).width();
        var height = $(this).height();
        if(height > maxHeight){
            ratio = maxHeight / height;
            $(this).css("height", maxHeight);
            $(this).css("width", width * ratio);
            width = width * ratio;
        }
    });
    //$("#contentpage img").show();
    // IMAGE RESIZE
});

Nguồn: thuthuatwordpress.org

Cùng Danh Mục

Liên Quan Khác

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>