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); }