jq实现跑马灯练手小demo
你要的文字匀速滚动
*{ margin:0; padding:0; } .main{ width: 400px; height:100px; margin:100px auto; position: relative; overflow: scroll; } .main ul{ height:100px; position: absolute; left:0; top:0; white-space:nowrap; /*强制不换行*/ display: inline-block;/*强制不换行 ，必须设为行内块*/ background-color: blueviolet;
overflow:hidden; } .main ul li{ list-style:none; border: 1px solid ; box-sizing: border-box; margin: 10px; display: inline-block;/*强制不换行 ，必须设为行内块*/ }
<div class="main"> <ul> <li>我是内容我是内容我是内容我是内容1</li> <li>我是内容我是内容我是内容我是内容2</li> <li>我是内容我是内容我是内容我是内容3</li> <li>我是内容我是内容我是内容我是内容4</li> <li>我是内容我是内容我是内容我是内容55555</li> </ul> </div>
//初始化定时器和滚动条
if (timer) {
$(".main")[0].scrollLeft = 0;
clearInterval(timer)
}
$(".main ul").append($(".main ul").html());
var ul_W = $(".main ul").outerWidth(true);
var timer = setInterval(function(){
if(ul_W/2 <= $(".main")[0].scrollLeft){ //如果滚动条离左边的距离到达 ul中间 说明此时在视觉上 ，内容和最开始滚动时显示的内容一样
$(".main")[0].scrollLeft = 0; //所以将滚动条回归到最初始位置 以此循环
}
$(".main")[0].scrollLeft++ ; //无论滚动到什么地方，滚动始终是不停的 ，所以是不停的加
},20);
拓展思考
css部分:
*{
margin:0;
padding:0;
}
.main{
400px;
height:100px;
margin:100px auto;
position: relative;
overflow: hidden;
}
.main ul{
height:100px;
position: absolute;
left:0;
top:0;
}
.main ul li{
list-style:none;
float: left;
border: 1px solid ;
box-sizing: border-box;
}
html部分:
<div class="main"> <ul> <li>1</li> <li>2</li> <li class="tree"><div>3</div></li> <li class="four">4</li> <li>5</li> </ul> </div>
js部分:
jq左滚动:
//左滚动 $(function(){ $(".main ul").append($(".main ul").html()); var ul_W = 0,left=0; $(".main ul li").each((i,dom)=>{ ul_W += $(dom).outerWidth(); }) $(".main ul").width(ul_W); console.log(ul_W) setInterval(my_left,1); function my_left(){ left -= 1; if(left <= -$(".main ul").outerWidth()/2){ left = 0; } // $('.main ul').css('left',left+'px') $('.main ul').animate({'left':left},1);//使用animate 在setInterval的基础上再次延缓动画 } });
jq右滚动:
$(function(){ $(".main ul").append($(".main ul").html()); var ul_W = 0; $(".main ul li").each((i,dom)=>{ ul_W += $(dom).outerWidth(); }) left=-ul_W/2; $(".main ul").width(ul_W); $(".main ul").css({ 'left':left }) setInterval(my_left,1); function my_left(){ left += 1; if(left >= 0){ left = -$(".main ul").outerWidth()/2; } $('.main ul').animate({'left':left},1); } });
考虑如果可能存在拖拽跑马灯情况, 使用absolute 进行定位不太友好 , 也可使用scroll , 方便后续调试代码
//左滚动 $(function(){ if (timer) { $(".main")[0].scrollLeft = 0; clearInterval(timer) } $(".main ul").append($(".main ul").html()); var ul_W = 0; $(".main ul li").each((i,dom)=>{ ul_W += $(dom).outerWidth(); }) $(".main ul").width(ul_W); console.log($(".main")[0].scrollLeft) var timer = setInterval(my_left,1); function my_left(){ if($(".main ul").outerWidth()/2 - $(".main")[0].scrollLeft<= 0){ $(".main")[0].scrollLeft -= $(".main ul").outerWidth()/2; }else { $(".main")[0].scrollLeft++ } } });
超级简单实现文字滚动
css
.wj-lunbo .ul-father{ width: 10rem; height: 1rem; margin: 0 auto; overflow: hidden; } .wj-lunbo ul { padding: 0 .4rem;
overflow:hidden; } .wj-lunbo ul li{ height: .9rem; line-height: .9rem; display: block; margin-bottom: .4rem; color: #cb1124; font-size: .7rem; text-align: center; overflow: hidden; }
html
<div class="wj-lunbo"> <div class="ul-father"> <ul > <li>3500元裸钻抵用券</li> <li>800元对戒抵用券</li> <li>2990元定制西服第二套0元</li> <li>免租伴娘服、妈妈装</li> </ul> </div> </div>
js
// 文字滚动 setInterval(() => { $('.ul-father').find("ul").animate({ marginTop: "-1.3rem" }, 500, function () { // 一行滚动查找1行, 多行滚动查找多行 $(this).css({ marginTop: "0" }).find("li:nth-child(1)").appendTo(this); }) }, 2000);
匀速上下滚动
$('.gundong_father ul').append($('.gundong_father ul').html());
setInterval(() => {
var scrollTop = parseFloat($('.gundong_father')[0].scrollTop);
if (scrollTop >= $('.gundong_father ul').outerHeight()/2+6) { //加6 是为了消除滚动条带来的顿挫感 , 用marginTop可以解决顿挫感 , 但考虑可能出现用户滑动操作 ,所以用scrollTop
// $('.gundong_father ul').append($('.gundong_father ul li').slice(0, 3));
scrollTop = 0
}
scrollTop++;
$('.gundong_father')[0].scrollTop= scrollTop;
}, 30);
将其结合,函数封装
html结构为
.main 宽高固定 overflow:scroll
ul 宽高不定 , 但需要使子元素垂直或水平方向将其撑开 overflow:hidden
li
$(function(){ function rollHandle(fatherCls,speed=20,delay=2000,direction,row){ var timer=timer2=null, $child_Ul = $(fatherCls+' ul'), $container = $(fatherCls); $container.css({ 'overflow': 'scroll' }) $child_Ul.css({ 'overflow': 'hidden' }) var scrolldirection = direction=='top'? 'scrollTop' : 'scrollLeft'; $child_Ul.append($child_Ul.html()); var ul_W = direction=='top'?$child_Ul.outerHeight(true):$child_Ul.outerWidth(true); if( ul_W/2 < $container.innerHeight()) return ; //ul高度或宽度不够则不滚动 function move(){ timer = setInterval(function(){ if(row && direction =='top'){ $container.animate({ scrollTop: $child_Ul.children('li').outerHeight(true)*row },500,function(){ $(this).css({ scrollTop: "0" }).find("li:lt("+row+")").appendTo($child_Ul); }) }else{ $container[0][scrolldirection]++ ; //无论滚动条在什么地方，滚动始终是不停的 } },speed); $container.scroll(function(){ if( $container[0][scrolldirection] > ul_W/2){ //滚动条离左边的距离到达 ul中间 此时在视觉上,内容和最开始滚动时显示的内容一样 $container[0][scrolldirection] = '0'; //将滚动条回归到最初始位置 以此循环 } }) } move(); $child_Ul.on("touchstart", function(e) { clearInterval(timer) clearInterval(timer2) //防抖 }); $child_Ul.on("touchend", function(e) { timer2 = setTimeout(move,delay) }); } rollHandle(".main",10,2000,'top') //父级class 运动速率 拖拽后延迟的时间 是否垂直 每次滚动的行数 rollHandle(".text_left",10,2000) //父级class 运动速率 拖拽后延迟的时间 是否垂直 })
封装为插件
/** * * @param {el} 父级节点选择器 * @param {speed} 滚动速率 默认20 * @param {delay} 拖拽后的延时 默认2000 * @param {direction} 滚动方向 默认 横向滚动 * @param {arollRow} 每次滚动的行数 * @param {duration} 每次滚动的动画执行时间 默认500 */ $(function(){ $.fn.rollHandle = function (options) { let _obj = { //默认参数 speed: 20, delay: 2000, duration: 500 } let _options = Object.assign({}, _obj, options); const { speed, delay, direction, rollRow, duration } = _options; var timer = null, timer2 = null, $child_Ul = $(this).children('ul'), $container = $(this); $container.css({ 'overflow': 'scroll' }) $child_Ul.css({ 'overflow': 'hidden' }) var scrollDirection = direction == 'top' ? 'scrollTop' : 'scrollLeft'; var ul_W = direction == 'top' ? $child_Ul.outerHeight(true) : $child_Ul.outerWidth(true); if (ul_W < $container.innerHeight()) return; //ul高度或宽度不够则不滚动 $child_Ul.append($child_Ul.html()); ul_W = direction == 'top' ? $child_Ul.outerHeight(true) : $child_Ul.outerWidth(true); function move() { timer = setInterval(function () { if (rollRow && direction == 'top') { $container.animate({ scrollTop: $child_Ul.children('li').outerHeight(true) * rollRow }, duration, function () { $(this).css({ scrollTop: "0" }).find("li:lt(" + rollRow + ")").appendTo($child_Ul); }) } else { $container[0][scrollDirection]++; //无论滚动条在什么地方，滚动始终是不停的 } }, speed); $container.scroll(function () { if ($container[0][scrollDirection] > ul_W / 2) { //滚动条离左边的距离到达 ul中间 此时在视觉上,内容和最开始滚动时显示的内容一样 $container[0][scrollDirection] = '0'; //将滚动条回归到最初始位置 以此循环 } }) } move(); $child_Ul.on("touchstart", function (e) { clearInterval(timer) clearInterval(timer2) //防抖 }); $child_Ul.on("touchend", function (e) { timer2 = setTimeout(move, delay) }); }
$(".main").rollHandle({
speed:2000,
delay:2000,
direction:'top',
rollRow:3,
duration:500
})
})
...