笔墨垂直水平重复滚动

父元素包裹时属性 overflow:hidden
水平：父元素设置了定位，子元素固定宽度，并且克隆子元素left父元素宽度

*{
    padding: 0;
    margin: 0;
}
#demo {
    overflow: scroll;
    height: 200px;
    width: 600px;
    border: 1px solid #000;
}

#demo1 li {
    list-style: none;
    display: block;
    color: #007AFF;
    margin: 5px 0;
}

.scroll_sp{
    width: 600px;
    height: 30px;
    overflow: hidden;
    border: 1px solid #0062CC;
    position: relative;
    margin-top: 50px;
}
.scroll_sp>div{
    display: inline-block;
    width: 600px;
    height: 30px;
    position: absolute;
}
.scroll_sp>div li{
    list-style: none;
}
.scroll_sp_div2{
    left: 600px;
}



    

    

        

            
HTML5是一个丰富的应用，可以给用户很多视觉上的享受！
            
HTML5是一个丰富的应用，可以给用户很多视觉上的享受！
            
HTML5是一个丰富的应用，可以给用户很多视觉上的享受！
            
HTML5是一个丰富的应用，可以给用户很多视觉上的享受！
            
HTML5是一个丰富的应用
            
HTML5是一个丰富的应用
            
HTML5是一个丰富的应用
            
HTML5是一个丰富的应用
            
HTML5是一个丰富的应用
            
HTML5是一个丰富的应用
        
        

    

    
    

        

            
水平滚动字体长度很长实验程序
        
        

    

文字循环垂直滚动

var demo = $("#demo")[0];
var demo1 = $("#demo1")[0];
var demo2 = $("#demo2")[0];
var speed = 30; //滚动速度值，值越大速度越慢
// var nnn = 1 
for (i = 0; i < 1; i++) {
    demo1.innerHTML += demo1.innerHTML
}
demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1

function Marquee() {
    //当滚动至demo1与demo2交界时,demo2.offsetTop,demo.scrollTop相等时，滚动到交界处
    if (demo2.offsetTop - demo.scrollTop <= 0){   //当<=0时，说明已经超出交界处
        demo.scrollTop -= demo1.offsetHeight //demo跳到最顶端  相当于：demo.scrollTop = demo.scrollTop - demo1.offsetHeight

    }else {
        demo.scrollTop++
    }
}

var MyMar = setInterval(Marquee, speed); //设置定时器
demo.onmouseover = function() {
    clearInterval(MyMar)
} //鼠标经过时清除定时器达到滚动停止的目的
demo.onmouseout = function() {
    MyMar = setInterval(Marquee, speed)
} //鼠标移开时重设定时器

文字水平循环滚动（单行）

var scroll_sp = $(.scroll_sp)[0]
var scroll_sp_div1 = $(.scroll_sp_div1)[0]
var scroll_sp_div2 = $(.scroll_sp_div2)[0]

for(var i; i<1; i++){
    scroll_sp_div1.innerHTML += scroll_sp_div2.innerHTML
}

scroll_sp_div2.innerHTML = scroll_sp_div1.innerHTML
// console.log($(.scroll_sp_div2).css("left"))
var scroll_sp_div2_left = parseInt($(.scroll_sp_div2).css("left"))
console.log(scroll_sp_div2_left)
console.log(scroll_sp.scrollLeft)
function shu(){

    if(scroll_sp_div2_left - scroll_sp.scrollLeft <=0){
        scroll_sp.scrollLeft -= scroll_sp_div1.offsetWidth
    }else{
        scroll_sp.scrollLeft++
    }
}

var time = setInterval(shu,30);
scroll_sp.onmouseover = function(){
    clearInterval(time)
}
scroll_sp.onmouseout = function(){
    time = setInterval(shu,30)
}