Diễn Đàn Hỗ Trợ FM
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.


[Code] code Reading progress bar style blue

Tác giả: - vào lúc:
Admin
Bài viết : 431
Points : 820
Like : 120
Punbb
Quản trị
Status : test
AdminACP
9/4/2016, 11:08
#1

code Reading progress bar style blue

[Code] code Reading progress bar style blue NUJJyws

đơ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