Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Cuộn tin tức đơn giản với jQuery
URL: https://www.javascriptbank.com/javascript-simple-news-ticker-with-jquery.html
Một đoạn mã JavaScript đơn giản sử dụng thư viện jQuery để tạo một khung chứa văn bản di chuyển liên tục lên phí trên. Đoạn mã rất dễ cài đặt và chỉnh sửa cho phù hợp nhu cầu sử dụng, đồng thời kết hợp với việc sử dụng CSS nên hiệu ứng trông khá bắt mắt.
Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Cuộn tin tức đơn giản với jQuery
URL: https://www.javascriptbank.com/javascript-simple-news-ticker-with-jquery.html
<style type="text/css">#ticker { width:180px; height:300px; border:1px solid #aaaaaa; overflow:auto; text-align: left; }#ticker dt { font:normal 14px Georgia; padding:0 10px 5px 10px; background-color:#e5e5e5; padding-top:10px; border:1px solid #ffffff; border-bottom:none; border-right:none; position:relative; }#ticker dd { margin-left:0; font:normal 11px Verdana; padding:0 10px 10px 10px; border-bottom:1px solid #aaaaaa; background-color:#e5e5e5; border-left:1px solid #ffffff; position:relative; }#ticker dd.last { border-bottom:1px solid #ffffff; }#ticker div { margin-top:0; }</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { //cache the tickervar ticker = $("#ticker"); //wrap dt:dd pairs in divsticker.children().filter("dt").each(function() { var dt = $(this), container = $("<div>"); dt.next().appendTo(container); dt.prependTo(container); container.appendTo(ticker);});//hide the scrollbarticker.css("overflow", "hidden");//animator functionfunction animator(currentItem) { //work out new anim duration var distance = currentItem.height();duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025; //animate the first child of the ticker currentItem.animate({ marginTop: -distance }, duration, "linear", function() { //move current item to the bottomcurrentItem.appendTo(currentItem.parent()).css("marginTop", 0);//recurseanimator(currentItem.parent().children(":first")); }); };//start the tickeranimator(ticker.children(":first"));//set mouseenterticker.mouseenter(function() { //stop current animation ticker.children().stop(); });//set mouseleaveticker.mouseleave(function() { //resume animation animator(ticker.children(":first")); }); }); </script><div id="tickerContainer"> <dl id="ticker"> <dt class="heading">This is a news title!</dt><dd class="text">This is a snippet of the news. It could be the whole news item or it could link to another page containing...</dd> <dt class="heading">News Heading 2</dt><dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd> <dt class="heading">News Heading 3</dt><dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd> <dt class="heading">News Heading 4</dt><dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd> <dt class="heading">This item is long!</dt><dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd> </dl> </div>