let tData=[ {djh:'1',ypmc:'样品名称1',wz:'货架1-1'}, {djh:'2',ypmc:'样品名称2',wz:'货架1-1'}, {djh:'3',ypmc:'样品名称3',wz:'货架1-1'}, {djh:'4',ypmc:'样品名称4',wz:'货架1-1'}, {djh:'5',ypmc:'样品名sf称51',wz:'货架1-1'}, {djh:'6',ypmc:'样品名称1r',wz:'货架1-1'}, {djh:'7',ypmc:'样品名称1rg',wz:'货架1-1'}, {djh:'8',ypmc:'样品名称43f1',wz:'货架1-1'}, {djh:'9',ypmc:'样品名称4tgs1',wz:'货架1-1'}, {djh:'10',ypmc:'样品sf名称erg1',wz:'货架1-1'}, {djh:'11',ypmc:'样品名sfsf称1',wz:'货架1-1'}, {djh:'12',ypmc:'样品名称1',wz:'货架1-1'}, {djh:'13',ypmc:'样品sfs名称1',wz:'货架1-1'}, {djh:'14',ypmc:'样品名称1',wz:'货架1-1'}, {djh:'15',ypmc:'样sf品名称1',wz:'货架1-1'}, {djh:'16',ypmc:'样sfs品名称1',wz:'货架1-1'}, {djh:'17',ypmc:'样sf品名称1',wz:'货架1-1'}, {djh:'18',ypmc:'样sfs品名称1',wz:'货架1-1'}, {djh:'19',ypmc:'样sf品名称1',wz:'货架1-1'}, {djh:'20',ypmc:'样sfs品名称1',wz:'货架1-1'} ] $('.tbodyMenu2').append( `${tData.map((item)=>{ return `<tr> <td width="30%">${item.djh}</td> <td width="40%">${item.ypmc}</td> <td width="30%">${item.wz}</td> </tr>` })}` ) //table的高 let tableMainHeight = $('.tbodyMenu2').height() let tableWai = $('.tbodyMenu2').parent().height() //溢出滚动 var myScroll = function (options){ let defaults ={ speed:100, // 数值越大,速度越慢 rowHeight:24 // td的高 } let opts = $.extend({},defaults,options),intId = [] function actionAnimata(obj,he){ obj.find('.tbodyMenu2').animate({ marginTop:'-=1' },0,function (){ let ss = Math.abs(parseInt($(this).css('margin-top'))) console.log(ss) if(ss >= he){ $(this).find('tr').slice(0,1).appendTo($(this)) $(this).css('margin-top','0') } }) } $('#tableMain').each(function (i){ console.log(i,'循环i') let speed = opts['speed'],he = opts['rowHeight'],_this = $(this) goAnimate(i,_this,he,speed) _this.hover(function (){ clearInterval(intId[i]) },function (){ goAnimate(i,_this,he,speed) }) }) function goAnimate(index,obj,he,speed){ intId[index] = setInterval(()=>{ if(obj.find('.tbodyMenu2').height() <= obj.height()){ clearInterval(intId[index]) }else{ actionAnimata(obj,he) } },speed) } } myScroll({ speed:100, //数值越大,速度越慢 rowHeight:30 //td的高度 })