Result
jQuery
$(document).ready(function() { var t = $("#ticker"); //ラップする t.children().filter("h3").each(function() { var h = $(this), c = $("<div>"); h.next().appendTo(c); h.prependTo(c); c.appendTo(t); }); //スクロールバー非表示 t.css("overflow", "hidden"); function animator(currentItem) { var d = currentItem.height(); duration = (d + parseInt(currentItem.css("marginBottom"))) / 0.025; //アイテムの処理 currentItem.animate({ marginBottom: -d }, duration, "linear", function() { currentItem.appendTo(currentItem.parent()).css("marginBottom", 0); animator(currentItem.parent().children(":first")); }); }; //ティッカーアニメーション開始 animator(t.children(":first")); //マウスセンサーをセット t.mouseenter(function() { //ストップ t.children().stop(); }); //マウスが外れた時の処理 t.mouseleave(function() { animator(t.children(":first")); });}); |
css
#ticker { width:180px; height:300px; border:1px solid #ccc; overflow:auto; }#ticker h3 { font-size: 14px; padding:0 10px 5px 10px; background-color:#eee; padding-top:10px; border:1px solid #fff; border-bottom:none; border-right:none; position:relative; }#ticker div.text { margin-left:0; font-size: 11px ; padding:0 10px 10px 10px; border-bottom:1px solid #ccc; background-color:#eee; border-left:1px solid #fff; position:relative; }#ticker div.last { border-bottom:1px solid #fff; }#ticker div { margin-top:0; } |
html
<div id="tickerContainer"> <div id="ticker"> <h3 class="heading">News title</h3><div class="text">text </div> <h3 class="heading">News title</h3><div class="text">text </div> </div></div> |
via
How to Create a Simple News Ticker
Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
