Home > Article > Web Front-end > Example of text row-by-row upward intermittent scrolling effect implemented with jQuery
This article mainly introduces the line-by-line upward intermittent scrolling effect of text implemented by jQuery, and involves jQuery's operating skills related to the dynamic transformation of page element styles based on time functions. Friends who are interested in jQuery can refer to this article
The specific code is as follows:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>www.php.cn jQuery文字逐行向上滚动代码</title> <link href="css/index.css" rel="external nofollow" rel="stylesheet" type="text/css"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> *{ margin:0px; padding:0px; font-family:'微软雅黑'; -webkit-tap-highlight-color:rgba(0,0,0,0); } li{ list-style:none } img{ border:none} a{text-decoration:none;} /* -------------------------摇奖排行榜----------------------------------- */ .Top_Record{} .record_Top{width:90%; height:50px; text-align:center; line-height:50px; margin:30px auto 0px; color:#000;} .topRec_List dl,.maquee{ width:90%; overflow:hidden; margin:0 auto; color:#7C7C7C} .topRec_List dd{ float:left; text-align:center; border-bottom:1px solid #1B96EE; color:#1B96EE;} .topRec_List dl dd:nth-child(1){ width:17%; height:40px; line-height:40px; } .topRec_List dl dd:nth-child(2){ width:18%; height:40px; line-height:40px; } .topRec_List dl dd:nth-child(3){ width:25%; height:40px; line-height:40px; } .topRec_List dl dd:nth-child(4){ width:40%; height:40px; line-height:40px; } .maquee{ height:195px;} .topRec_List ul{ width:100%; height:195px;} .topRec_List li{ width:100%; height:38px; line-height:38px; text-align:center; font-size:12px; border-bottom: 1px dashed #aaa;} /*.topRec_List li:nth-child(2n){ background:#077cd0}*/ .topRec_List li p{ float:left;} .topRec_List li p:nth-child(1){ width:17%;} .topRec_List li p:nth-child(2){ width:18%;} .topRec_List li p:nth-child(3){ width:25%;} .topRec_List li p:nth-child(4){ width:40%;} .apple a{display:block; text-decoration:none;} .apple,.aa{ width:90%; height:50px; overflow:hidden; margin:30px auto; border:1px solid #1B96EE;} .apple a,.aa a{ width:100%; height:50px; line-height:50px; text-indent:20px; color:#1B96EE;} .aa {word-wrap:break-word;line-height:50px; color:#1B96EE;} </style> </head> <body> <p class="Top_Record"> <p class="record_Top">摇奖排行榜</p> <p class="topRec_List"> <dl> <dd>编号</dd> <dd>姓名</dd> <dd>奖项</dd> <dd>时间</dd> </dl> <p class="maquee"> <ul> <li> <p>1</p> <p>王**</p> <p>中了30元</p> <p>2014/12/30 14:20</p> </li> <li> <p>2</p> <p>王**</p> <p>中了30元</p> <p>2014/12/30 14:20</p> </li> <li> <p>3</p> <p>王**</p> <p>中了30元</p> <p>2014/12/30 14:20</p> </li> <li> <p>4</p> <p>王**</p> <p>中了30元</p> <p>2014/12/30 14:20</p> </li> <li> <p>5</p> <p>王**</p> <p>中了30元</p> <p>2014/12/30 14:20</p> </li> <li> <p>6</p> <p>王**</p> <p>中了30元</p> <p>2014/12/30 14:20</p> </li> <li> <p>7</p> <p>王**</p> <p>中了30元</p> <p>2014/12/30 14:20</p> </li> <li> <p>8</p> <p>王**</p> <p>中了30元</p> <p>2014/12/30 14:20</p> </li> </ul> </p> </p> </p> <script type="text/javascript"> function autoScroll(obj){ $(obj).find("ul").animate({ marginTop : "-39px" },1000,function(){ $(this).css({marginTop : "0px"}).find("li:first").appendTo(this); }) } $(function(){ var scroll=setInterval('autoScroll(".maquee")',1500); $(".maquee").hover(function(){ console.log("aaa"); clearInterval(scroll); },function(){ scroll=setInterval('autoScroll(".maquee")',1500); }); }); </script> </body> </html>
The above is the source code of this article. Friends who are interested in this article can refer to the source code. I hope it will be helpful to your study! Welcome to pay attention to PHP Chinese website!
Related recommendations:
jquery rounding up and down is suitable for paging queries
jQuery traverses the parents of the DOM tree upward ( ), parent(), closest()
The above is the detailed content of Example of text row-by-row upward intermittent scrolling effect implemented with jQuery. For more information, please follow other related articles on the PHP Chinese website!