zoukankan      html  css  js  c++  java
  • jQuery实现消息列表循环垂直向上滚动

    HTML代码:

                    <ul id="notice">
                        <li class="text-ellipsis">这是一条消息0</li>
                        <li class="text-ellipsis">这是一条消息1</li>
                        <li class="text-ellipsis">这是一条消息2</li>
                    </ul>

    jQuery代码:

    
    
    $(function () {
    movedome();
    });

    function movedome(){
    var margintop=0;//上边距的偏移量 var stop=false; setInterval(function(){ if(stop==true){ return; } $("#notice").children("li").first().animate({"margin-top":margintop--},0,function(){ var $li=$(this); if(!$li.is(":animated")){//第一个li的动画结束时 if(-margintop>$li.height()){ $li.css("margin-top","0px").appendTo($("#notice")); margintop=0; } } }); },50); //鼠标放到快递信息(ul)上时 $("#notice").hover(function(){ $(this).css("cursor","pointer"); stop=true;//停止动画 },function(){ stop=false;//开始动画 }); }

     或者

            <style>
                .ul1{list-style: none;margin: 0}
                li{padding: 5px;}
            </style>
            <div style="background-color:pink; margin:15px 90px 0 90px;padding-left: 310px; height: 600px;">
                <div style="position: relative;height: 26px;overflow: hidden;">
                    <ul class="ul1">
                        <li>K先生:我求求你嫁给我</li>
                        <li>K先生:等你老了,我依然背着你</li>
                        <li>K先生:我给你当拐杖</li>
                        <li>K先生:等你没牙了,我就嚼碎了再喂给你吃</li>
                    </ul>
    <%--                <img style="position: absolute;top: 9px;left: 20px" width="15px" height="15px" src="laba.png">--%>
                </div>
            </div>
    $(function () {
    var num=$(".ul1").find("li").length;
    console.log("直接运行"+num);
    if (num>1) {
    setInterval(function(){
    $('.ul1').animate({
    marginTop:"-26px"
    },500,function(){
    $(this).css({marginTop : "0"}).find("li:first").appendTo(this);
    });
    }, 3000);
    }
    })
  • 相关阅读:
    Bootstrap3 formテキストフィールド横幅の指定の仕方
    HTML豆ちしき
    iMac Termanel命令まとめ
    ちょっとした難しい言葉まとめ①
    即使痛苦,绝不止步
    Bower —— 一个Web的包管理工具
    词汇
    8.3.2018 1 Quick and dirty 快而脏的快餐
    7.26 5 优化浪漫 恋爱中的经济学
    7.26 4 印度旅馆阿鲁沙之家
  • 原文地址:https://www.cnblogs.com/sherryweb/p/11088978.html
Copyright © 2011-2022 走看看