碼上快樂

相關內容    簡體    繁體

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 頁面實現文字滾動效果(跑馬燈) VUE 文字跑馬燈（文本滾動） JavaScript實現文字跑馬燈 Vue實現文字跑馬燈效果 使用 JS 實現文字上下跑馬燈 Android文字跑馬燈控件（文本自動滾動控件） IOS跑馬燈效果，實現文字水平無間斷滾動 Unity3D 文字滾動跑馬燈效果
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM