Nội dung

Tạo content scroller cuộn với simplyScroll cho website

1 năm trước, Code plugin wordpress, Code theme wordpress, Hướng dẫn làm theme wordpess, Thủ thuật web, Wordpress, 204 Lượt xem

jQuery simplyScroll 2 là 1 thư viện jquery giúp cho các bạn cuộn nội dung, hình ảnh của bạn 1 cách mượt mà và dễ dàng, mời các bạn tham khảo cách chèn vào website của bạn nhé!

Tích hợp vào website wordpress

ở bài viết này mình sẽ hướng dẫn các bạn tích hợp vào website wordpress của mình nhé

Download thư viện về và up vào thư mục theme của bạn
copy 3 file này vào thư mục

Sau đó chèn đoạn mã này vào trước thẻ </head của trang web bạn>

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/simplyscroll/jquery.simplyscroll.js"></script>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/simplyscroll/jquery.simplyscroll.css" media="all" type="text/css">
    <script type="text/javascript">
        (function($) {
            $(function() {
                $("#scroller").simplyScroll({
                    orientation: 'vertical',
                    customClass: 'vert'
                });
            });
        })(jQuery);
    </script>

Code html mẫu

<ul id="scroller">
    <li><img src="https://logicbox.net/jquery/simplyscroll/assets/20080608_9N3H5GYL_tb.jpg" width="290" height="200" alt="Firehouse"></li>
    <li><img src="https://logicbox.net/jquery/simplyscroll/assets/20080513_4D3SD1BQ_tb.jpg" width="290" height="200" alt="Chloe nightclub"></li>
    <li><img src="https://logicbox.net/jquery/simplyscroll/assets/20080513_VPJWVQRW_tb.jpg" width="290" height="200" alt="Firehouse bar"></li>
    <li><img src="https://logicbox.net/jquery/simplyscroll/assets/20080514_B1YJ08B6_tb.jpg" width="290" height="200" alt="Firehouse chloe club fishtank"></li>
    <li><img src="https://logicbox.net/jquery/simplyscroll/assets/20080514_JYW68XPT_tb.jpg" width="290" height="200" alt="Firehouse restaurant"></li>
    <li><img src="https://logicbox.net/jquery/simplyscroll/assets/20080608_38CG51J2_tb.jpg" width="290" height="200" alt="Firehouse"></li>
</ul>
Thành quả, chúc các bạn thành công, hình ảnh sẽ tự Scroll đi lên..hihi

Ngoài ra các bạn có thể sử dụng hiệu ứng marquee

Code mẫu

   <marquee behavior="scroll"
                        class ="box-tin-tuc" 
                        scrolldelay="150"
                        direction="up"
                        onmouseover="this.stop();"
                        onmouseout="this.start();">

                        aaaaaaaaaaaaaaaaaaaaaaaa<br>
                        aaaaaaaaaaaaaaaaaaaaaaaa<br>
                        </marquee>

Bài viết mới cập nhập

  • Quản lý mẫu web công ty

    Quản lý mẫu web công ty

    1 tháng trước, 124 Lượt xem

    Xin chào tất cả các khách hàng dùng mẫu web công ty bên netweb, sau đây netweb.vn xin hướng dẫn các bạn quản lý mẫu…

Bình luận trên facebook netweb.vn

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)