jQuery 如何实现文字不间断滚动的效果? 下面本篇文章给大家通过实例介绍一下 jQuery 如何实现文字逐行向上滚动效果. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
下面通过代码实例来介绍一下.
- <!doctype html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 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 div{ float:left;}
- .topRec_List li div:nth-child(1){ width:17%;} .topRec_List li div:nth-child(2){
- width:18%;} .topRec_List li div:nth-child(3){ width:25%;} .topRec_List
- li div: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>
- <div class="Top_Record">
- <div class="record_Top">
- 摇奖排行榜
- </div>
- <div class="topRec_List">
- <dl>
- <dd>
- 编号
- </dd>
- <dd>
- 姓名
- </dd>
- <dd>
- 奖项
- </dd>
- <dd>
- 时间
- </dd>
- </dl>
- <div class="maquee">
- <ul>
- <li>
- <div>
- 1
- </div>
- <div>
- 王 **
- </div>
- <div>
- 中了 30 元
- </div>
- <div>
- 2014/12/30 14:20
- </div>
- </li>
- <li>
- <div>
- 2
- </div>
- <div>
- 王 **
- </div>
- <div>
- 中了 30 元
- </div>
- <div>
- 2014/12/30 14:20
- </div>
- </li>
- <li>
- <div>
- 3
- </div>
- <div>
- 王 **
- </div>
- <div>
- 中了 30 元
- </div>
- <div>
- 2014/12/30 14:20
- </div>
- </li>
- <li>
- <div>
- 4
- </div>
- <div>
- 王 **
- </div>
- <div>
- 中了 30 元
- </div>
- <div>
- 2014/12/30 14:20
- </div>
- </li>
- <li>
- <div>
- 5
- </div>
- <div>
- 王 **
- </div>
- <div>
- 中了 30 元
- </div>
- <div>
- 2014/12/30 14:20
- </div>
- </li>
- <li>
- <div>
- 6
- </div>
- <div>
- 王 **
- </div>
- <div>
- 中了 30 元
- </div>
- <div>
- 2014/12/30 14:20
- </div>
- </li>
- <li>
- <div>
- 7
- </div>
- <div>
- 王 **
- </div>
- <div>
- 中了 30 元
- </div>
- <div>
- 2014/12/30 14:20
- </div>
- </li>
- <li>
- <div>
- 8
- </div>
- <div>
- 王 **
- </div>
- <div>
- 中了 30 元
- </div>
- <div>
- 2014/12/30 14:20
- </div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <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>
运行效果图如下:
更多 Web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/18284.html