具體代碼如下： ...
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
}
#box{
margin:50px auto;
padding:0 10px;
width:1000px;
height:35px;
line-height:35px;
border:1px dashed green;
background:lightgreen;
}
#box #wrap{
height:35px;
overflow:hidden;
white-space:nowrap;
}
#box span{
color:red;
font-weight:bold;
font-size:16px;
}
#wrap div{
display:inline-block;
}
</style>
</head>
<body>
<div id='box'>
<div id='wrap'>
<div id='conBegin'>
<span>通知：</span>7月6日消息,今日下午人民日報在微博上發表了一篇名為《新聞莫被演算法"綁架"》的文章,文中直指"今日頭條""一點資訊"這類痴迷於技術和演算法的新聞客戶端越來越'簡單粗暴'了,並批判這些公司引.文中直指"今日頭條""一點資訊"這類痴迷於技術和演算法的新聞客戶端越來越'簡單粗暴'了,並批判這些公司引
</div>
<div id='conEnd'>
<span>通知：</span>7月6日消息,今日下午人民日報在微博上發表了一篇名為《新聞莫被演算法"綁架"》的文章,文中直指"今日頭條""一點資訊"這類痴迷於技術和演算法的新聞客戶端越來越'簡單粗暴'了,並批判這些公司引.文中直指"今日頭條""一點資訊"這類痴迷於技術和演算法的新聞客戶端越來越'簡單粗暴'了,並批判這些公司引
</div>
</div>
</div>
<script>
~function(){
var box = document.getElementById('box');
var conBegin = document.getElementById('conBegin');
var wrap = document.getElementById('wrap');
var conBegin_width = getCss(conBegin,'width');//之前封裝好的獲取css樣式的方法
var timer = window.setInterval(move,10)
function move(){
//優化前的代碼
// var curLeft = wrap.scrollLeft;
// wrap.scrollLeft = curLeft +1;
// var newLeft = wrap.scrollLeft;
// if(curLeft == newLeft){
// //利用了scrollLeft是存在最大值的思想，在累加1之前獲取一個值，在累加之後獲取一個值，如果兩個值相等了，說明已經達到最大值了，所以清除定時器
// // window.clearInterval(timer)
// wrap.scrollLeft = 0//這樣雖然從頭開始了，但是會導致會閃爍一下。
// }
//優化後的代碼 使用兩個一樣內容的div避免閃爍
wrap.scrollLeft++;
var curLeft = wrap.scrollLeft;
if(wrap.scrollLeft >= conBegin_width){
wrap.scrollLeft = 0
}
}
//滑鼠划過停止
box.onmouseover = function(){
window.clearInterval(timer);
}
box.onmouseout = function(){
timer = window.setInterval(move,10)
}
}()
</script>
</body>
</html>
