jQuery实现的文字逐行向上间歇滚动效果示例
程序员文章站
2022-04-29 08:10:01
本文实例讲述了jquery实现的文字逐行向上间歇滚动效果。分享给大家供大家参考，具体如下：
运行效果图如下：
具体代码如下：
本文实例讲述了jquery实现的文字逐行向上间歇滚动效果。分享给大家供大家参考，具体如下：
运行效果图如下：
具体代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net 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>
更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery切换特效与技巧总结》、《jquery拖拽特效与技巧总结》、《jquery扩展技巧总结》、《jquery常见经典特效汇总》、《jquery动画与特效用法总结》、《jquery选择器用法总结》及《jquery常用插件及用法总结》
希望本文所述对大家jquery程序设计有所帮助。