<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
font-family: "微软雅黑";
font-size: 14px;
-webkit-user-select: none;
}
#box{
position: relative;
margin: 40px auto;
padding: 0 5px 0 40px;
width: 800px;
height: 40px;
border: 1px dashed green;
background-color: papayawhip;
}
.boxIcon{
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
background: url(img/notic.jpg) no-repeat center center;
}
#boxCon{
height: 40px;
line-height: 40px;
white-space: nowrap;
overflow: hidden;
}
#box-begin,#box-end{
display: inline-block;
}
</style>
</head>
<body>
<div id="box">
<div class="boxIcon"></div>
<div id="boxCon">
<div id="box-begin">
郭声琨:执法安全合作体现中越政治互信中宣部发布“时代楷模”阿布列林和赵志全湖南省委书记杜家毫:将绝对忠诚铸入灵魂丁关根同志是我们党宣传思想文化战线的卓越领导人。作为党的中央领导集体的重要成员，他参与了党和国家一系列重大决策。
</div>
<div id="box-end">
郭声琨:执法安全合作体现中越政治互信中宣部发布“时代楷模”阿布列林和赵志全湖南省委书记杜家毫:将绝对忠诚铸入灵魂丁关根同志是我们党宣传思想文化战线的卓越领导人。作为党的中央领导集体的重要成员，他参与了党和国家一系列重大决策。
</div>
</div>
</div>
<script type="text/javascript">
//原理：
//1保证页面上有俩一模一样的容器box-begin box-end
//2获取box-gegin的宽度
//3设置一个定时器每隔一段时间让boxCon的scrollLeft不断增加
var boxCon=document.getElementById("boxCon");
var box_begin=document.getElementById("box-begin");
var box_eng=document.getElementById("box-end");
var boxBW=parseFloat(window.getComputedStyle(box_begin).width);
console.log(boxBW)
var timer=window.setInterval(function(){
var sL=boxCon.scrollLeft;
if(sL>boxBW){
boxCon.scrollLeft=0;
return;
}
boxCon.scrollLeft++;
},10)
</script>
</body>
</html>
1640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
