Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi hopthucuaduc, 31/1/15.

Lượt xem: 3,203

  1. hopthucuaduc Thành viên cấp 2

    Đứ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:

    [​IMG]
    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
    #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
    $(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

    ...
    Chỉnh sửa lần cuối bởi moderator: 31/1/15
    Phạm Hữu DưSwingsOnlyone thích bài viết này.

Ủng hộ diễn đàn