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

<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);}

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45685252/article/details/118930772