超级简单易学的文字滚动滑屏
先上效果图,样式可以自己编写
上样图
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$.fn.extend({
luntopFn: function(o){
var time = o.time ? o.time: 30;
var ul = o.bd ? $(o.bd) : $(this).find("ul");
ul.append(ul.children().clone(true));
o.times = null;
var len = ul.height()/2;
if(!!$(this)[0]){
o.times = window.setInterval(function(){
var t = ul.css('top');
t = t.replace('px','');
if(t > -len){
t--;
ul.css({top: t});
}else{
ul.css({top: 0});
};
},time);
ul.hover(function(){
window.clearInterval(o.times);
},function(){
o.times = window.setInterval(function(){
var t = ul.css('top');
t = t.replace('px','');
if(t > -len){
t--;
ul.css({top: t});
}else{
ul.css({top: 0});
};
},time);
});
}
},
})
</script>
<style type="text/css">
.con06CLT{
text-align: center;
margin-top: 45px;
color: #fff;
line-height: 0px;
/*overflow: hidden;*/
}
.con06CLT h3{
font-size: 30px;
/*line-height: 32px;*/
}
.con06CLB{
overflow: hidden;
padding: 10px 40px 0 45px; height:140px
}
.con06CL{
background: url(con06bg.png);
width: 354px;
height: 265px;
margin: 52px 22px 0 0;
}
.con06CLT p{
font-size: 23px;
}
.fl {
float: left;
}
.fr {
float: right;
}
</style>
</head>
<body>
<div class="con06CL fl">
<div class="con06CLT">
<h3>已参加学习人员列表</h3>
<p>(最新加入人数)</p>
</div>
<div class="con06CLB" style="overflow: hidden; position: relative; ">
<ul style="margin: 0px; padding: 0px; overflow: hidden; position: relative; list-style: none; top: -281px;">
<li style="position: relative; overflow: hidden; ">
<a href="javascript:; " class="fl">祝贺林**</a><span class="fr">131******58 加入学习阵营</span>
</li>
<li style="position: relative; overflow: hidden; ">
<a href="javascript:; " class="fl">祝贺陈**</a><span class="fr">156******63 加入学习阵营</span>
</li>
<li style="position: relative; overflow: hidden; ">
<a href="javascript:; " class="fl">祝贺李**</a><span class="fr">132******45 加入学习阵营</span>
</li>
<li style="position: relative; overflow: hidden; ">
<a href="javascript:; " class="fl">祝贺圆**</a><span class="fr">152******25 加入学习阵营</span>
</li>
<li style="position: relative; overflow: hidden; ">
<a href="javascript:; " class="fl">祝贺宗**</a><span class="fr">138******89 加入学习阵营</span>
</li>
<li style="position: relative; overflow: hidden; ">
<a href="javascript:; " class="fl">祝贺朱**</a><span class="fr">133******46 加入学习阵营</span>
</li>
<li style="position: relative; overflow: hidden; ">
<a href="javascript:; " class="fl">祝贺王**</a><span class="fr">120******28 加入学习阵营</span>
</li>
<li style="position: relative; overflow: hidden; ">
<a href="javascript:; " class="fl">祝贺赵**</a><span class="fr">135******37 加入学习阵营</span>
</li>
<li style="position: relative; overflow: hidden; ">
<a href="javascript:; " class="fl">祝贺黄**</a><span class="fr">155******15 加入学习阵营</span>
</li>
<li style="position: relative; overflow: hidden; ">
<a href="javascript:; " class="fl">祝贺孙**</a><span class="fr">151******34 加入学习阵营</span>
</li>
<li style="position: relative; overflow: hidden; ">
<a href="javascript:; " class="fl">祝贺周**</a><span class="fr">131******29 加入学习阵营</span>
</li>
<li style="position: relative; overflow: hidden; ">
<a href="javascript:; " class="fl">祝贺郑**</a><span class="fr">182******22 加入学习阵营</span>
</li>
<li style="position: relative; overflow: hidden; ">
<a href="javascript:; " class="fl">祝贺吴**</a><span class="fr">131******57 加入学习阵营</span>
</li>
<li style="position: relative; overflow: hidden; ">
<a href="javascript:; " class="fl">祝贺林**</a><span class="fr">156******61 加入学习阵营</span>
</li>
<li style="position: relative; overflow: hidden; ">
<a href="javascript:; " class="fl">祝贺陈**</a><span class="fr">131******33 加入学习阵营</span>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(".con06CLB").luntopFn({time: 100});//滑动的速度
</script>
</body>
</html>
欢迎评论区讨论哦@_@!