JQ 文字无缝滚动效果
程序员文章站
2024-01-25 13:38:40
...
demo.css
.box{ width:400px; margin:0 auto;}
.bcon{ width:270px; border:1px solid #eee; margin:30px auto;}
.bcon h1{ border-bottom:1px solid #eee; padding:0 10px;}
.bcon h1 b{ font-size:14px; line-height:40px; border-top:2px solid #3492D1; padding:0 8px; margin-top:-1px; display:inline-block;}
.list_lh{ height:400px; overflow:hidden;}
.list_lh li{ padding:10px;}
.list_lh li.lieven{ background:#F0F2F3;}
.list_lh li p{ height:24px; line-height:24px;}
.list_lh li p a{ float:left;}
.list_lh li p em{ width:80px; font:normal 12px/24px Arial; color:#FF3300; float:right; display:inline-block;}
.list_lh li p span{ color:#999; float:right;}
.list_lh li p a.btn_lh{ background:#28BD19; height:17px; line-height:17px; color:#fff; padding:0 5px; margin-top:4px; display:inline-block; float:right;}
.btn_lh:hover{ color:#fff; text-decoration:none;}
scroll.js
(function($){
$.fn.myScroll = function(options){
//默认配置
var defaults = {
speed:40, //滚动速度,值越大速度越慢
rowHeight:24 //每行的高度
};
var opts = $.extend({}, defaults, options),intId = [];
function marquee(obj, step){
obj.find("ul").animate({
marginTop: '-=1'
},0,function(){
var s = Math.abs(parseInt($(this).css("margin-top")));
if(s >= step){
$(this).find("li").slice(0, 1).appendTo($(this));
$(this).css("margin-top", 0);
}
});
}
this.each(function(i){
var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, sh);
}
}, speed);
_this.hover(function(){
clearInterval(intId[i]);
},function(){
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, sh);
}
}, speed);
});
});
}
})(jQuery);
demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery文字无缝滚动效果代码</title>
<link type="text/css" href="css/base.css" rel="stylesheet" />
<link type="text/css" href="css/demo.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript">
$(function(){
$('.list_lh li:even').addClass('lieven');
$("div.list_lh").myScroll({
speed:40, //数值越大，速度越慢
rowHeight:68 //li的高度
});
});
</script>
</head>
<body>
<div class="box">
<div class="bcon">
<h1><b>文字无缝上下滚动</b></h1>
<!-- begin -->
<div class="list_lh">
<ul>
<li>
<p><a href="###" target="_blank">1000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">2000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">3000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">4000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">5000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">6000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">7000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">8000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">9000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">1000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">1100000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">1200000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
</ul>
</div>
<!-- end -->
</div>
</div>
</body>
</html>
效果图：
上一篇： PHP 50个提高性能的写法
下一篇： MySQL基本数据类型