jQuery实现跑马灯效果

jQuery实现跑马灯效果

实现横向跑马灯效果的原理，用定时器 自定让 匹配元素的 水平滚动条 “动”起来！！！

js获取匹配对象的水平滚动条scrollLeft的位置。offsetWidth 对象的可见宽度 (不一定是这个盒子设置css样式的值，可能是 它里面内容 撑开的宽度)。

html:

    <div class="container">
        <!-- 我们做测试的时候，可以让 盒子 出现 滚动条，我们实现的功能：用定时器 自动让 水平滚动条 “动”起来！！！ -->
        <div class="scroll_div" style="overflow: scroll;">
            <div class="scroll_begin">
                <!-- ul>li*11>a{文字$} -->
                <ul>
                    <li><a href="">文字1</a></li>
                    <li><a href="">文字2</a></li>
                    <li><a href="">文字3</a></li>
                    <li><a href="">文字4</a></li>
                    <li><a href="">文字5</a></li>
                    <li><a href="">文字6</a></li>
                    <li><a href="">文字7</a></li>
                    <li><a href="">文字8</a></li>
                    <li><a href="">文字9</a></li>
                    <li><a href="">文字10</a></li>
                    <li><a href="">文字11</a></li>
                </ul>
            </div>
            <div class="scroll_end">
            </div>
        </div>
    </div>

css:

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 50%;
            height: 50px;
            margin: 50px auto 0;
        }

        .container .scroll_div {
            width: 100%;
            height: 50px;
            margin: 0 auto;
            overflow: hidden;
            white-space: nowrap;
            background: #333;
            color: #a6a6a6;
        }

        .container .scroll_div a {
            width: 120px;
            height: 50px;
            margin: auto 8px;
            color: #333;
        }

        .container .scroll_begin,
        .container .scroll_end,
        .container .scroll_begin ul,
        .container .scroll_end ul,
        .container .scroll_begin ul li,
        .container .scroll_end ul li {
            display: inline-block;
        }

        .container .scroll_begin ul li,
        .container .scroll_end ul li {
            display: inline-block;
            min-width: 200px;
        }

        .container .scroll_begin ul li a,
        .container .scroll_end ul li a {
            display: inline-block;
            width: 100%;
            line-height: 50px;
            color: #a6a6a6;
            text-decoration: none;
        }

        .container .scroll_begin ul li a:hover,
        .container .scroll_end ul li a:hover {
            text-decoration: underline;
            
        }

    </style>

jquery:

 <!-- 引入jquery库 -->
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            // 自动播放 定时器

            getScroll();
            
            function getScroll(){

                // 1.抓取元素
                var scroll_div = $('.scroll_div')[0];
                console.log(scroll_div);

                var scroll_begin = $('.scroll_begin')[0];
                console.log(scroll_begin);

                var scroll_end = $('.scroll_end')[0];
                console.log(scroll_end);

                // 拿内容
                // console.log(scroll_begin.innerHTML);
                // 向end这个盒子中 放置存储 内容
                scroll_end.innerHTML = scroll_begin.innerHTML;


                // // scrollLeft 设置所有匹配元素的滚动条的水平位置
                // ( 滚动条的偏移值，你不动“滚动条”，scrollLeft这个值是0   )
                // （当你 一旦 移动 了 “滚动条”， scrollLeft这个值是 会 变化的！   ）
                // console.log(scroll_div.scrollLeft);

                // //offsetWidth 对象的可见宽度 (不一定是这个盒子设置css样式的值，可能是 它里面内容 撑开的宽度)
                // console.log(scroll_end.offsetWidth);

                // 跑马灯效果
                function Marquee(){

                    if(scroll_end.offsetWidth - scroll_div.scrollLeft <= 0){
                        // scroll_div.scrollLeft = scroll_div.scrollLeft - scroll_end.offsetWidth;
                        scroll_div.scrollLeft -= scroll_end.offsetWidth;

                        console.log(scroll_div.scrollLeft);
                    }else{
                        scroll_div.scrollLeft++;
                    }
                   

                    console.log(scroll_div.scrollLeft);
                }

                var timer = setInterval(Marquee,30)

                // 鼠标移入div盒子上的时候，我们要清除定时器
                $('.scroll_div').mouseover(function(){
                    clearInterval(timer);
                })

                // 鼠标移出div盒子的时候，我们要启动定时器
                $('.scroll_div').mouseout(function(){
                    timer = setInterval(Marquee,30)
                })

            }
            

        })
    </script>