html中表格行循环滚动例子二（前面带有圆灯闪烁效果的，可以自定义样式）

最新推荐文章于 2023-03-10 18:04:33 发布

fy573060627

最新推荐文章于 2023-03-10 18:04:33 发布

阅读量249

点赞数

分类专栏：个人笔记文章标签： html css js 循环滚动圆灯闪烁效果

本文链接：https://blog.csdn.net/fy573060627/article/details/114964029

版权

个人笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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>
 标题1
 标题2
 标题3
 标题4
 </li>
 </ul>
 </div>
 <div class="scroll_table" id="scroll_table">
 <ul>
 <li>
 
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 </li>
 <li class="actived">
 
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 </li>
 <li>
 
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 </li>
 <li>
 
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 </li>
 <li>
 
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 </li>

 <li class="actived">
 
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 </li>
 <li>
 
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 </li>
 <li>
 
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 </li>
 <li>
 
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 </li>
 <li>
 
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 </li>
 <li>
 
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 </li>
 <li>
 
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 内容内容内容内容内容内容内容内容内容内容内容
 </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>

fy573060627

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html中表格行循环滚动例子二（前面带有圆灯闪烁效果的，可以自定义样式）

<!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> @key...
复制链接

扫一扫

专栏目录