Tạo nút lên đầu trang dạng tên lửa cực đẹp

Đức Phạm - Trước khi vào bài ta cần tìm hiểu một chút nhé. Hiệu ứng này ta sẽ dùng 1 cái hình mà bên trong cái hình đó là 6 cái hình nhỏ khác nhau, ứng với các trạng thái khác nhau của từng hình. Như vậy ta phải dùng background-position để hiện thị từng hình, 6 trạng thái có background-position như sau:

1. Trang thái 1 có : background-position :0px 0px
2. Trang thái 2 có : background-position :-149px 0
3. Trang thái 3 có : background-position :-298px 0
4. Trang thái 4 có : background-position :-447px 0
5. Trang thái 5 có : background-position :-596px 0
6. Trang thái 6 có : background-position :-745px 0

Chúng ta bắt tay vào làm nào, phần HTML các bạn chỉ cần để như thế này trong phần body, cho height nó cao 1 chút là được :
CSS

HTML:

#totop,#totop2{
    position: fixed;right: 0;bottom: 10px;
    width: 149px;height: 249px;overflow: hidden;
    cursor: pointer;display: none;
    background: url(https://www.googledrive.com/host/0B_-3-pIiTRGhUVRobWszZzNvNTQ) no-repeat 0px 0;
    z-index: 9999;
}

#totop2{
    background: url(https://www.googledrive.com/host/0B_-3-pIiTRGhUVRobWszZzNvNTQ) no-repeat -149px 0;
}

jQuery

Code:

$(function(){

    $('html').append('<div id="totop"></div><div id="totop2"></div>')
    $('#totop').hover(function(){
        $('#totop2').fadeIn().mouseout(function(){
            $(this).fadeOut(200)
        })
    })

    var defaultTop=$(window).height()-10-249//10 vị trí canh bottom ban đầu, 249 là chiều cao
    $(window).resize(function(){
        defaultTop=$(window).height()-10-249//phòng trường hợp resize trình duyệt
    })

    var ranPo=['-298px 0','-447px 0','-596px 0','-745px 0']

    $(window).scroll(function(){

        var $top=$(window).scrollTop()
        if($top>50){
            $('#totop').fadeIn(100)
            $('#totop2').css('top',defaultTop)
        }else{
            $('#totop,#totop2').fadeOut(100)
        }
    })

    $('#totop2').click(function(){
        timeranPo=window.setInterval(function(){
           $('#totop2').css({'background-position':ranPo[Math.floor(Math.random()*ranPo.length)],'display':'block'})
        },200)

        setTimeout(function(){
            $('html,body').stop().animate({scrollTop:'50px'},400,function(){
                $('#totop2').stop().animate({'top':'-250px'},300,function(){
                    clearInterval(timeranPo)
                    $('#totop2').css('background-position','-149px 0').hide()
                })
            })
        },800)
    })
})

Và nhớ đừng quên chèn thư viện jquery.min.js vào nhé.

Một lần nữa xin cảm ơn các bạn đã đọc bài viết. Nếu có bất kỳ câu hỏi hoặc yêu cầu nào liên quan đến chủ đề này, xin vui lòng để lại bình luận phía dưới. Mời các bạn ghé thăm blog Đức Phạm