從頂端插入,滾動展現（Demo）：

時間 2019-12-04

標籤頂端插入滾動展現 demo 简体版

原文原文鏈接

新聞滾動，從頂端插入：css

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
 var $this = $(".scrollNews");
            var scrollTimer;
            $this.hover(function () {
                clearInterval(scrollTimer);
            }, function () {
                scrollTimer = setInterval(function () {
                    scrollNews($this);
                }, 2000);
            }).trigger("mouseleave");
 
            function scrollNews(obj) {
                var $self = obj.find("ul");
                var lineHeight = $self.find("li:first").height();

                $self.animate({
                    "marginTop": +lineHeight + "px"
                }, 600, function () {

                    $self.css({
                        marginTop: 0
                    }).find("li:first").before('<li><a href="#" class="tooltip" title="夏末雪紡店主含淚大甩賣.">夏末雪紡店主含淚大甩賣.</a></li>');

                })
            }

});
</script>
</head>
<body>
<div class="scrollNews"  >
<ul id="p1">
<li><a href="#" class="tooltip" title="甜美寬鬆毛衣今秋必定紅.">甜美寬鬆毛衣今秋必定紅.</a></li>
<li><a href="#" class="tooltip" title="秋裝百搭小馬甲不到50元.">秋裝百搭小馬甲不到50元.</a></li>
<li><a href="#" class="tooltip" title="修身韓版小西裝萬人瘋搶.">修身韓版小西裝萬人瘋搶.</a></li>
<li><a href="#" class="tooltip" title="夏末雪紡店主含淚大甩賣.">夏末雪紡店主含淚大甩賣.</a></li>
<li><a href="#" class="tooltip" title="瑞麗都瘋狂推薦的秋裝.">瑞麗都瘋狂推薦的秋裝.</a></li>
<li><a href="#" class="tooltip" title="48元長款針織小開衫賣瘋啦.">48元長款針織小開衫賣瘋啦.</a></li>
<li><a href="#" class="tooltip" title="長袖雪紡衫單穿內搭都超美.">長袖雪紡衫單穿內搭都超美.</a></li>
</ul>
</div>
</body>
</html>

相關資源：html

Github:jquery

https://github.com/CheneyYang?tab=repositoriesgit

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。