SimplyScroll là một plugin rất linh hoạt trong việc tạo hiệu ứng cuộn (scroll) nội dung. Với plugin này, các bạn có thể cuộn nội dung theo chiều ngang, chiều dọc, cuộn về bên trái hay bên phải, có thể cho nó tự động chạy hoặc điều khiển bằng các nút bấm…

Với plugin này các bạn có thể dùng để tạo các chức năng cho web như liệt kê danh sách các khách hàng tiêu biểu (dựa vào logo của họ), hoặc liệt kê sản phẩm bán chạy…

HTML

Để tạo nội dung cuộn, trước hết chúng ta cần có nội dung cần định dạng như sau:



<ul>
<ul>
    <li><img alt="" src="image1.jpg" width="290" height="200" /></li>
    <li><img alt="" src="image2.jpg" width="290" height="200" /></li>
    <li><img alt="" src="image3.jpg" width="290" height="200" /></li>
</ul>
</ul>

<ul id="scroller">...</ul>

JAVASCRIPT

Kế tiếp, chúng ta sẽ chèn thư viện jQuery và plugin simplyScroll vào, đồng thời kích hoạt hiệu ứng.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">// <![CDATA[
 // ]]></script>

<script type="text/javascript" src="jquery.simplyscroll.js"></script><script type="text/javascript">

// <![CDATA[
(function($) {
    $(function() { //on DOM ready
            $("#scroller").simplyScroll();
    });
 })(jQuery);
// ]]>

</script>

CSS

Chúng ta sẽ cần định dạng cơ bản cho hiệu ứng, tại đây các bạn có thể ấn định kích thước chiều ngang hay chiều dọc cũng như độ cao của nội dung cần cuộn (scroll).


/* Container DIV - automatically generated */
.simply-scroll-container {
    position: relative;
}
 
/* Clip DIV - automatically generated */
.simply-scroll-clip {
    position: relative;
    overflow: hidden;
}
 
/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list {
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}
 
.simply-scroll-list li {
    padding: 0;
    margin: 0;
    list-style: none;
}
 
.simply-scroll-list li img {
    border: none;
    display: block;
}
 
/* Custom class modifications - adds to / overrides above
 
.simply-scroll is default base class */
 
/* Container DIV */
.simply-scroll {
    width: 576px;
    height: 200px;
    margin-bottom: 1em;
}
 
/* Clip DIV */
.simply-scroll .simply-scroll-clip {
    width: 576px;
    height: 200px;
}
 
/* Explicitly set height/width of each list item */
.simply-scroll .simply-scroll-list li {
    float: left; /* Horizontal scroll only */
    width: 290px;
    height: 200px;
}

Property Default Description
customClass ‘simply-scroll’ Tên class cần định dạng
frameRate 24 Số frame trên giây
speed 1 Số lượng pixel di chuyển trên 1 frame
orientation ‘horizontal’ Nếu muốn cuộn chiều ngang thì đặt ‘horizontal’ còn chiều dọc thì đặt ‘vertical’
direction ‘forwards’ ‘forwards’ hoặc ‘backwards’
auto true Tự động cuộn, nếu muốn tắt thì đặt giá trị là false
autoMode ‘loop’ auto = false, ‘loop’ or ‘end’ (end-to-end)
manualMode ‘end’ auto = false, ‘loop’ or ‘end’ (end-to-end)
pauseOnHover true Dừng lại khi rê chuột vào , thay đổi giá trị false thì ngược lại
pauseOnTouch true Hỗ trợ tính năng Touch
pauseButton false Tạo nút dừng (pause)
startOnLoad false Khởi tạo plugin khi window load

Nguồn: http://logicbox.net/jquery/simplyscroll/

  • Jquery
  • May 13, 2014
  • 0 comment
  • 106 lượt xem

Recent posts

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Tuổi thọ pin iPhone được xác định thông qua chu kỳ sạc/xả, với con số 500 để về 80%. Tuy […]

Rối loạn về tin đồn iPhone màn hình gập của Apple

Rối loạn về tin đồn iPhone màn hình gập của Apple

Báo cáo mới nhất cho hay, Apple vẫn chưa từ bỏ iPhone màn hình gập nhưng cũng không gấp gáp […]

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Một rò rỉ mới cho biết phiên bản cập nhật iOS 18 mà Apple phát hành vào mùa thu 2024 […]

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Tuổi thọ pin iPhone được xác định thông qua chu kỳ sạc/xả, với con số 500 để về 80%. Tuy […]

TikTok thách thức công cụ tìm kiếm của Google

TikTok thách thức công cụ tìm kiếm của Google

TikTok đã trở thành công cụ tìm kiếm ngày càng phổ biến trong giới trẻ ở Mỹ. Một cuộc khảo […]

© 2021 Tạp Chí CNTT. Mr Hoang