滚动文字

2017-12-15

前言

在很多网站都看到过滚动文字的效果，比如在天下3 中就使用了大量的滚动文字，一般用来显示数据，而且节约空间。其实，滚动文字的实现比较简单，就是控制元素的scrollLeft值或者scrollTop值。

一、横向滚动文字

html结构如下：

<div class="box">
    <div class="content-box">
        <div class="content-original">
            <ul>
                <li>
                  <a href='#' >1.这里的鲜花都是最新鲜的，质量也是最好的！</a>					
              	</li>
                <li>
                  <a href='#'>2.公告：9月15日起增开夜间21点-24点交易场次</a>
                </li>
            </ul>
        </div>
        <div class="content-copy"></div>
    </div>
</div>

css：

*{
         padding:0;
         margin: 0;
     }
     li{
         list-style: none;
     }
     a{
         text-decoration: none;
     }
     .box{
         width: 400px;
         height: 40px;
         overflow: hidden;
         margin: 100px;
     }
     .content-box{
         width: 8000%;
     }
     .content-box div{
         float: left;
     }
    .content-box ul li{
        float: left;
        line-height: 40px;
    }

jQuery：

 var box = $(".box");
 var contentOriginal = $(".content-original");
 $(".content-copy").html(contentOriginal.html());
function scrollLeft() {
    if(box[0].scrollLeft >= contentOriginal[0].offsetWidth){
        box[0].scrollLeft = 0;
    }else{
        box[0].scrollLeft++;
    }
}
var timer =setInterval(scrollLeft,40);
box.on("mouseover",function () {
    clearInterval(timer);
}).on("mouseout",function () {
  timer = setInterval(scrollLeft,40);
})

实现原理：

1.通过改变box元素scrollLeft值（即左边卷曲进去的距离）来让元素滚动起来；

2.将content-original的内容完全赋值给content-copy元素；

3.当box的scrollLeft值大于content-original的实际宽度时，说明content-original已经滚动过了，后面显示的是content-copy元素的内容，这是让box的scrollLeft值为0，回到初始状态；

4.否则，让box的scrollLeft值逐步加1（让里面的内容匀速滚动）。

大概原理如图所示：

yuanli

注意：存在一个问题，当显示区域的宽度大于demo1的宽度太多时，会出现一段空白后，突然显示之后的内容

二、竖向滚动文字

竖向和横向实现原理相同，只是css有些不同而已！

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.2.3.min.js"></script>
    <style>
        *{
            padding:0;
            margin:0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .box{
            width: 400px;
            height: 40px;
            line-height: 40px;
            overflow: hidden;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="content-box">
        <div class="content-original">
            <ul>
                <li>
                    <a href='#' >1.这里的鲜花都是最新鲜的，质量也是最好的！</a>
                </li>
                <li>
                    <a href='#'>2.公告：9月15日起增开夜间21点-24点交易场次</a>
                </li>
            </ul>
        </div>
        <div class="content-copy"></div>
    </div>
</div>
<script>
    var box = $(".box");
    var contentOriginal = $(".content-original");
    $(".content-copy").html(contentOriginal.html());
	function scollTop() {
    	if(box[0].scrollTop >= contentOriginal[0].offsetHeight){
        	box[0].scrollTop = 0;
    	}else{
        	box[0].scrollTop++;
    	}
	}
	var timer = setInterval(scollTop,30);
	box.on("mouseover",function () {
    	clearInterval(timer);
	})
    box.on("mouseout",function () {
        timer = setInterval(scollTop,30);
    })
</script>
</body>
</html>