<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title></title>
<style>
@keyframes fade {
from {opacity: 1.0;}
50% {opacity: 0.4;}
to {opacity: 1.0;}
}
.scroll_table{
height: 200px;width: 100%; overflow: hidden;
}
.list li{
display: flex;
list-style: none;height: 40px;line-height: 40px;
border-bottom: 1px solid #757575;box-sizing: border-box;
position: relative;
}
/*
.list .scroll_table li:nth-of-type(odd){ background:#00ccff;}
.list .scroll_table li:nth-of-type(even){ background:#ffcc00;}
*/
.list li .col_item{
flex: 1;
text-align: center;
}
.scroll_table li .col_item:nth-child(0) {
width: 30px;
}
.scroll_table li .lamp{
position: absolute; top: 10px; left: 15px;
display: inline-block;width: 15px;height: 15px;
margin-right: 10px;border-radius: 50%;
background: #757575;box-shadow: 0 0 8px #3e3c3b;
}
.scroll_table li .lamp_red{
background: #ef0808;box-shadow: 0 0 8px #f52828
}
.scroll_table li .lamp_green{
background: #83d507;box-shadow: 0 0 8px #159326
}
.scroll_table li.actived .lamp{
animation: fade 600ms infinite;-webkit-animation: fade 600ms infinite;
}
</style>
</head>
<body>
<div class="list">
<div >
<ul>
<li>
<span class="col_item">标题1</span>
<span class="col_item">标题2</span>
<span class="col_item">标题3</span>
<span class="col_item">标题4</span>
</li>
</ul>
</div>
<div class="scroll_table" id="scroll_table">
<ul>
<li>
<span class="lamp"></span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
</li>
<li class="actived">
<span class="lamp lamp_red"></span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
</li>
<li>
<span class="lamp"></span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
</li>
<li>
<span class="lamp"></span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
</li>
<li>
<span class="lamp lamp_green"></span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
</li>
<li class="actived">
<span class="lamp lamp_green"></span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
</li>
<li>
<span class="lamp lamp_green"></span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
</li>
<li>
<span class="lamp lamp_green"></span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
</li>
<li>
<span class="lamp lamp_green"></span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
</li>
<li>
<span class="lamp lamp_green"></span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
</li>
<li>
<span class="lamp lamp_green"></span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
</li>
<li>
<span class="lamp lamp_green"></span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
<span class="col_item">内容内容内容内容内容内容内容内容内容内容内容</span>
</li>
</ul>
</div>
</div>
<script>
(function($){
$.fn.myScroll = function(options){
//默认配置
var defaults = {
speed:40, //滚动速度,值越大速度越慢
rowHeight: 30 //每行的高度
};
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);
// 调用滚动方法
$("#scroll_table").myScroll({
speed: 50, //数值越大，速度越慢
rowHeight: 40 //li的高度
});
</script>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
