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);
    }
    })
  • 相关阅读:
    营山护照办理
    非北京人员 办理护照
    护照填写注意事项
    美国会议签证——我是正当理由去美国,我能支付(或有人为我支付)我在美国期间的所有费用,办完事我肯定回来, 邀请信,行程表这些材料齐全即可
    urllib2使用2
    python 异常
    python urllib和urllib2 区别
    python类继承
    gcc编译4个阶段
    Vim中如何全选并复制?
  • 原文地址:https://www.cnblogs.com/sherryweb/p/11088978.html
Copyright © 2011-2022 走看看