Tạo hiệu ứng link chạy cuộn liên tục simplyscroll

Hôm nay yeusharevip blogger xin Share với mọi người thủ thuật mới
Để add widget này ta làm như sau ta dùng hiệu ứng simply scroll
Với plugin này, mọi người có thể cuộn nội dung  bên trong 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….

B1 :add thư viện jquery nếu chưa có

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>

B2 : add style

<style>
/* Container DIV - automatically generated */
.simply-scroll-container {
    position: relative;
}

/* Clip DIV - automatically generated */
.simply-scroll-clip {
    position: relative;
    overflow: hidden;
    z-index: 2;
}

/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list {
    position: absolute;
    top: 0;
    left:0;
    z-index: 1;
    overflow: hidden;
    margin: 0;
    padding:0;
}
   
.simply-scroll-list li {
    padding: 0;
    margin: 0;
}
ol#scroller{
list-style:none;
margin-left:5px;
float:left;
padding-left:5px;
text-align:left;
}   
.simply-scroll-list li img {
    border: none;
    display: block;
}

/* Master button styles - note that left and right
versions are included although they are not used in this example */

.simply-scroll-btn {
    position: absolute;

    width: 42px;
    height: 44px;
    z-index:3;
    cursor: pointer;
}
   
.simply-scroll-btn-left {
    left: 6px;
    bottom: 6px;
    background-position: 0 -44px;
}
.simply-scroll-btn-left.disabled {
    background-position: 0 0 !important;
}
.simply-scroll-btn-left:hover {
    background-position: 0 -88px;
}
   
.simply-scroll-btn-right {
    right: 6px;
    bottom: 6px;
    background-position: 84px -44px;
}
.simply-scroll-btn-right.disabled {
    background-position: 84px 0 !important;
}
.simply-scroll-btn-right:hover {
    background-position: 84px -88px;
}
   
.simply-scroll-btn-up {
    right: 6px;
    top: 6px;
    background-position: -126px -44px;
}
.simply-scroll-btn-up.disabled {
    background-position: -126px 0 !important;
}
.simply-scroll-btn-up:hover {
    background-position: -126px -88px;
}
   
.simply-scroll-btn-down {
    right: 6px;
    bottom: 6px;
    background-position: -42px -44px;
}
.simply-scroll-btn-down.disabled {
    background-position: -42px 0 !important;
}
.simply-scroll-btn-down:hover {
    background-position: -42px -88px;
}

/* Custom class modifications - adds to / overrides above

Vertical scroller example, with custom base class */

/* Container DIV */
.vert {
    width: 190px; /* wider than clip for custom button pos. */
    height: 210px;

}

/* Clip DIV */
.vert .simply-scroll-clip {
    width: 190px;
    height: 180px;
     margin-top:10px;
    margin-bottom: 5px;

}

/* Explicitly set height/width of each list item */
.vert .simply-scroll-list li {
    width: 185px;
    height: 26px;
    padding-left:5px;

}

/* Modified button positions, overriding previous styles */
.vert .simply-scroll-btn-up {
    right: 0;
    top: 0;
}

.vert .simply-scroll-btn-down {
    right: 0;
    top: 52px;
}
</style>

B3 thêm chút kích hoạt để chạy

<script src='http://webvn20.googlecode.com/files/jquery.simplyscroll.js' type='text/javascript'></script>
<script type='text/javascript'>

//<![CDATA[

(function($) {
    $(function() { //on DOM ready
        $("#scroller").simplyScroll({
            customClass: 'vert',
            orientation: 'vertical',
            auto: true,
            manualMode: 'loop',
            frameRate: 24,
            speed: 2
        });
    });
})(jQuery);
    
      //]]>
</script>

B4 html để có thể chạy bạn có thể thêm khi có ai liên kết đến

<ol id="scroller">
<li><a href="http://tivi24.blogspot.com/" target=
"_blank">01-Truyền Hình Việt Nam</a></li>
<li><a href="http://emoticonsgo.blogspot.com/" target=
"_blank">02-Emoticons</a></li>
<li><a href="http://i888.blogspot.com/" target=
"_blank">03-Ảnh Hot </a></li>
<li><a href="http://g888.blogspot.com/" target=
"_blank">04-Ảnh Đẹp</a></li>
<li><a href=http://phimtoi.blogspot.com/" target=
"_blank">05-Phim Buổi tối</a></li>
<li><a href="http://watchonlinego.blogspot.com/" target=
"_blank">06-Tivi Online</a></li>
<li><a href="http://khosachvn.blogspot.com/" target=
"_blank">07-Kho sách chia sẻ</a></li>
<li><a href="http://dailyxeoto.blogspot.com/" alt="toyota thăng long" target=
"_blank">08-Toyota Thăng Long</a></li>
<li><a href="http://www.vusteven.info" target=
"_blank" alt="Vũ Steven | Chia Sẻ Thủ Thuật - Giải Trí Tổng Hợp">09-Vũ Steven [ INFO ]</a></li>
<li><a href="http://namkna.blogspot.com/" target=
"_blank" alt="namkna blog">10-Namkna blog</a></li>

<li><a href="http://www.thuvienthuthuat.com/" title="thu vien Thủ thuật" target="_blank">11-thư viện thủ thuật</a></li>
<li><a href="http://gameto9.blogspot.com/" title="play game to 9 " target="_blank">12-play game to 9</a></li>

<li><a href="http://onlinegames360.blogspot.com/" title="play online games 360 " target="_blank">13-play game online 360</a></li>


</ol>


<br/>
<hr/>
<font style="color:Black;font-size:14px;font-weight:bolder">♪ <a class="anime" href="http://shimivn.blogspot.com/2012/04/trao-oi-lien-ket-link-exchange.html">Trao Đổi Link</a> ♫
</font>

Chúng ta sẽ cần định dạng cơ bản cho hiệu ứng ở css,  mọi người 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).

Và sau đây là danh sách các lựa chọn dành cho bạn khi sử dụng plugin này : ở B3

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

chúc mọi người thành công

Nếu có thắc mắc, hãy để lại comment phía dưới nhé, quản trị viên của yeusharevip blogger sẵn sàng trợ giúp bạn
chúc mọi người thành công!!