码上快乐

相关内容   简体   繁体

12行代码简单实现跑马灯文字匀速滚动

本文转载自  查看原文  2020-07-29 16:50  761    造轮子系列

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{
        width: 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 
 * @param {drag} 是否禁止拖拽
 */
$(function () {
    $.fn.rollHandle = function (options) {
        let _obj = {
            speed: 20,
            delay: 2000,
            duration: 500,
            drag: false
        }
        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) {
                    if (direction == 'top') {
                        var roll_height = $container.find("li:nth-child(" + (rollRow + 1) + ")").offset().top - $container.find("li:nth-child(1)").offset().top;
                        $container.animate({
                            scrollTop: roll_height
                        }, duration, function () {
                            $(this).css({
                                scrollTop: "0"
                            }).find("li:lt(" + rollRow + ")").appendTo($child_Ul);
                        })
                    } else {
                        var roll_w = $container.find("li:nth-child(" + (rollRow + 1) + ")").offset().left - $container.find("li:nth-child(1)").offset().left;
                        $container.animate({
                            scrollLeft: roll_w
                        }, duration, function () {
                            $container[0][scrollDirection] = '0';
                            $container.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();
        if (drag) {
            $child_Ul.on('mousemove', function (e) {
                e.preventDefault();
                return false;
            });
            $child_Ul.on('touchmove', function (e) {
                e.preventDefault();
                return false;
            })
        } else {
            $child_Ul.on("touchstart", function (e) {
                clearInterval(timer)
                clearInterval(timer2) //防抖
            });
            $child_Ul.on("touchend", function (e) {
                timer2 = setTimeout(move, delay)
            });
        }
    }
})

 

 

注意点:
- 横向滚动或者纵向滚动必须将子级`ul`宽高撑开**
- 子元素需要隔开时使用padding,使用margin, 滚动到第一个字元素时会有闪动
- main需要宽高

 

 

...


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 小程序字体滚动代码实现文字跑马灯效果。 marquee一行代码实现滚动跑马灯效果无需js JavaScript实现文字跑马灯 Android文字跑马灯控件（文本自动滚动控件） marquee标签实现跑马灯效果--无缝滚动 Flutter用Swiper实现文字跑马灯效果 vue文字跑马灯效果 js简单跑马灯案例 vue--实现跑马灯效果 jquery实现跑马灯效果（一）
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM