[Code] code Reading progress bar style blue

  • Admin
    1. [Code] code Reading progress bar style blue
    avatar ACP

    code Reading progress bar style blue



    đơn giản thôi code khi mình cross thanh bar xuống nó sẽ hiện thanh báo ở trên . mình cũng ko biết diễn tả đâu. xem demo ấy. code thử nghiệm trên blogger và invisie và phpbb3 ổn nhé. ai bị lỗi ở phpbb2 và punbb thì gửi link lên mình fix nhé

    Code:
    <style>
    /* Reading progress bar */
    #nprogress{pointer-events:none}
    #nprogress .bar{background:#29d;position:fixed;z-index:1031;top:0;left:0;width:0;height:3px}
    #nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #29d,0 0 5px #29d;opacity:1;-webkit-transform:rotate(3deg) translate(0,-4px);-ms-transform:rotate(3deg) translate(0,-4px);transform:rotate(3deg) translate(0,-4px)}
    </style>
    <div id='nprogress'><div class='bar' role='bar'><div class='peg'></div></div></div>
    <script>//<![CDATA[
    !function(t){t.fn.viewportOffset=function(){
      var o=t(this).offset();
      return{top:o.top+t(window).scrollTop()};},t.fn.readingbar=function(){_=t(this);
      var o=_.outerHeight(),r=1.65*_.offset().top,n=0;
      t(document).on("scroll",function(){o=_.outerHeight(),n=(_.viewportOffset().top-r)/o*100,t("#nprogress .bar").css("width",n+"%"),t("#nprogress").css("opacity",n>100?"0":"1")})}}(jQuery);
      jQuery(document).ready(function($) {$('.post-entry, .postbody, .post-body ').readingbar();
     });
    //]]></script>

    Tags: #code #blogger #codefm

Thông tin tác giả
avatar
ACP
Bài viết :
353
Points :
690
Like :
108
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết

<