Stats Count Social Media Effect JQuery - Hiệu ứng Tự động đếm Số

A4Manga

Share the Best for you !

Top Ad unit 728 × 90

Home CSS jQuery Social Stats Count Social Media Effect jQuery - Hiệu ứng tự động đếm số Stats Count Social Media Effect jQuery - Hiệu ứng tự động đếm số Cozy 04:14 CSS, jQuery, Social Stats Count Social jQuery là code thống kê số lượng fan, member trên các mạng xã hội. Các Social Media CSS dạng tĩnh quá nhàn chán với bạn vậy hãy thêm một chút hiệu ứng Effect (chuyển động) để làm làm trang web của bạn cá tính và nổi bật hơn.Bạn sẽ phải tự nhập số lượng fan, thành viên trên các mạng xã hội khác nhau và mỗi tuần bạn sẽ phải cập nhập (update) lại số lượng lượt likes, follows mới vào html.Demo: Click vào Result để xem

Yêu cầu cơ bản:

Hãy chắc chắn blog, web của bạn đã có thư viện jQuery<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>Tiếp theo hãy thêm Font Awesome để hiển thị được các biểu tượng icon<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>Hãy thêm vào phần đầu của trang web (trong thẻ head)

HTML:

Hãy thêm code sau vào web:<div class="social-follower"> <div class="social-box"> <div class="s-icon icon-google"><i class="fa fa-google-plus"></i></div> <div class="social-count"> <div class="s-number stat-count">832</div> <div class="s-text">People</div> </div> </div> <div class="social-box"> <div class="s-icon icon-facebook"><i class="fa fa-facebook"></i></div> <div class="social-count"> <div class="s-number stat-count">1993</div> <div class="s-text">Follow</div> </div> </div> <div class="social-box"> <div class="s-icon icon-twitter"><i class="fa fa-twitter"></i></div> <div class="social-count"> <div class="s-number stat-count">532</div> <div class="s-text">Follow</div> </div> </div> <div class="social-box"> <div class="s-icon icon-github"><i class="fa fa-github fa-6"></i></div> <div class="social-count"> <div class="s-number stat-count">333</div> <div class="s-text">Follow</div> </div> </div></div>Trong đó social-box là mỗi khung con cho mỗi thống kê mạng xã hội chúng ta cần thêm vào và được bao quanh bởi thẻ div có class="social-follower".

CSS:

Hãy thiết lập thuộc tính box-sizing cho các thẻ div để chiều cao, chiều rộng của khung sẽ bao gồm luôn cả padding, border. Thì khi chúng ta xem ở các chế độ (Responsive) nó sẽ tự đông thiết lập chiều cao, chiều rộng phù hợp với khung nhìn..social-follower,.social-box,.social-box .social-count,.social-box .social-count .s-number,.social-box .social-count .s-text { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}Bây giờ hãy làm đẹp cho khung và nội dung trong đó.social-follower { height:60px; margin-left:-10px; /*-- Resize box Responsive --*/ margin-right:-10px; /*-- Resize box Responsive --*/}.social-box { width: 50%; float: left; padding: 0 10px; /*-- Resize box Responsive --*/ margin-bottom: 10px; display: inline-block;}.social-box .s-icon { position: relative; width: 60px; height: 60px; display: block; line-height: 60px; text-align: center; font-size: 22px; background-color: #222; color: #fff; float: left;}/*-- Tạo độ bóng cho icon bằng hình tam giác --*/.social-box .s-icon:before { content: " "; width: 0; height: 0; border-style: solid; border-width: 60px 60px 0 0; border-color: rgba(255,255,255,0.1) transparent transparent transparent; position: absolute; left: 0; top: 0;}.social-box .social-count { background: #f0f0f0; /*-- Màu nền của nội dung --*/ text-align: center; overflow: hidden;}.social-box .social-count .s-number { color: #222; font-size: 20px; font-weight: 600; margin-bottom: 0; height: 30px; padding-top:10px;}.social-box .social-count .s-text { text-transform: uppercase; font-size: 10px; color: #999; line-height: 30px;}/*-- Thiết lập màu nền cho mỗi mạng xã hội khác nhau --*/.social-box .icon-facebook { background-color: #3b5998;}.social-box .icon-google { background-color: #dd4b39;}.social-box .icon-twitter { background-color: #55ACEE;}

jQuery

Chúng ta sẽ thêm hiệu ứng tự động đếm từ số 1 đến số lượng like, fan ban đầu.(function($) { "Sun Fantastic"; function count($this) { var current = parseInt($this.html(), 10); current = current + 1; $this.html(++current); if (current > $this.data('count')) { $this.html($this.data('count')) } else { setTimeout(function() { count($this) }, 10) // Tốc độ đếm số, số 1 là nhanh nhất } } $(".stat-count").each(function() { $(this).data('count', parseInt($(this).html(), 10)); $(this).html('0'); count($(this)) })})(jQuery);Giá trị 0 sẽ là tốc độ đếm nhanh nhất, các giá trị lớn hơn sẽ làm giảm tốc độ đếm số.Bây giờ bất kì số nào được gán class="stat-count" sẽ tự động kích hoạt đếm đến từ 1 đến giá trị thực.Chúc bạn thành công ! Stats Count Social Media Effect jQuery - Hiệu ứng tự động đếm số Reviewed by Cozy on 04:14 Rating: 5

Tags :

CSS jQuery Social

• Tweet
• Share
• Share
• Share
• Share

About Sweetheme

Number of Entries : 35

We are Developers Team do our best to create beautiful work for our clients. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Social

Không có nhận xét nào:

Bài đăng Mới hơn Bài đăng Cũ hơn Trang chủ Đăng ký: Đăng Nhận xét (Atom) Contact us All Rights Reserved by A4Manga © 2014 - 2015 Powered By Blogger, Designed by Sweetheme

Biểu mẫu liên hệ

Tên Email * Thông báo * Được tạo bởi Blogger.