Page news tips, scroll up or down

HTML part:

                            <% - placing the message scroll - %> 
                            < div class = "messageWrap borderBox" > 
                                < div class = "Message borderBox" > 
                                    < UL ID = "Notice" > 
                                        < Li class = "text-ellipsis" > This is a message 0 </ Li > 
                                        < Li class = "text-ellipsis" > this is a message. 1 </ Li > 
                                        < Li class = "text-ellipsis" > this is a message 2 </li>
                                    </ul>
                                </div>
                            </div>

css section:

/ * ============ scrolling message on the style =========== * / 
.messageWrap { 
  position : Absolute ; 
  bottom : 0 ; 
  height : 0.64rem ; 
  width : % 100 ; 
  padding : 0 0.2rem ; 
  overflow : hidden ;
}
.message{
  width:100%;
  background:#fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  height:100%;
  overflow:hidden;
  padding-left:0.2rem;
}
.message li{
  line-height:0.64rem;
}
/ * ============ scrolling message on the style ============= * /

js part:

    // rolling up and down the notification message 
    var NUM = $ ( "# Notice") Find ( "Li." ) .Length;
     IF (NUM>. 1 ) {
        setInterval(function(){
            $('#notice').animate({
                marginTop:"-26px"
            },500,function(){
                $(this).css({marginTop : "0"}).find("li:first").appendTo(this);
            });
        }, 3000);
    }

Guess you like

Origin www.cnblogs.com/sherryweb/p/12097081.html