实现一个横向文字滚动链接的效果

最新推荐文章于 2022-11-22 01:27:45 发布

在车上在路上

最新推荐文章于 2022-11-22 01:27:45 发布

阅读量217

点赞数

文章标签： css html js

本文链接：https://blog.csdn.net/weixin_45685252/article/details/118930772

版权

JavaScript 无缝滚动公告栏 Marquee 定时器

关键词由CSDN通过智能技术生成

<div id="activeSwiper" class="swipermove">
    <div class="swipermoveitem">
        <div id="actitem1">
            <ul>
                <li>
                    <a href='#' style="color: rgb(255, 0, 0);">我是第一条第一条第一条第一条</a>
                </li>
                <li>
                    <a href='#' style="color: rgb(255, 157, 0);">我是第二条第二条第二条第二条</a>
                </li>
                <li>
                    <a href='#' style="color: rgb(9, 255, 0);">我是第三条第三条第三条第三条</a>
                </li>
                <li>
                    <a href='#' style="color: rgb(0, 174, 255);">我是第四条第四条第四条第四条</a>
                </li>
                <li>
                    <a href='#' style="color: rgb(140, 0, 255);">我是第五条第五条第五条第五条</a>
                </li>
                <li>
                    <a href='#' style="color: rgb(255, 0, 221);">我是第六条第六条第六条第六条</a>
                </li>
            </ul>
        </div>
        <div id="actitem2"></div>
    </div>
</div>

.swipermove{
    overflow:hidden;
    width:40%;
    background: #000000;
}
/*外层div,设置公告可见范围*/
.swipermove .swipermoveitem {
    /*width:9999999999px;*/
    width:8000%;
}
/*公告内容,给内容预留足够的空间宽度*/
.swipermove .swipermoveitem div{
    float:left;
}
/*让两个层合并为一排，也是无缝对接的关键*/
.swipermove .swipermoveitem ul{
    float:left;
    overflow:hidden;
}
.swipermove .swipermoveitem ul li{
    float:left;
    list-style:none;
    margin-right:10px;
}

var activeSwiper = document.getElementById("activeSwiper");
var actitem1 = document.getElementById("actitem1");
var actitem2 = document.getElementById("actitem2");
actitem2.innerHTML=document.getElementById("actitem1").innerHTML;
function Marquee(){
    if(activeSwiper.scrollLeft-actitem2.offsetWidth>=0){
        activeSwiper.scrollLeft-=actitem1.offsetWidth;
    }else{
        activeSwiper.scrollLeft++;
    }
}
var myvar=setInterval(Marquee,50);
activeSwiper.onmouseout=function (){myvar=setInterval(Marquee,50);}
activeSwiper.onmouseover=function(){clearInterval(myvar);}