js 单行文字水平来回滚动（左右滚动）
2018-09-17 本文已影响41人
world_7735
垂直上下滚动
效果：
代码：
<html>
<style>
.n_box{
overflow:hidden;
background:#fffded url("../static/img/news_notice.png") 5px center no-repeat;
background-size:20px;
position:fixed;
height: 30px;
left:0;
top:40px;
width:100%;
z-index:1001;
}
.n_box_one{
position: relative;
display: block;
margin-left: 20px;
height: 30px;
overflow: hidden;
}
.n_box_title{
position: absolute;
top: 0px;
left:100%;
display: inline-block;
font-size:12px;
line-height:30px;
color:#ef8a56;
white-space:nowrap;
overflow-x:auto;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<div class="n_box">
<div class="n_box_one">
<div class="n_box_title">asdasdlkasldkmalksmdlakslkdmlaksmdlkamsdl</div>
</div>
</div>
<script type="text/javascript">
var cars = $(".n_box_title").width();
var w = $(window).width();
// console.log(w);
var i =w;
function start(){
i--;
if(i<=-cars){
i=w;
$('.n_box_title').css({right:0+'px'});
}else{
$('.n_box_title').css({left:i+'px'});
}
setTimeout(start,10);
}
onload=function(){setTimeout(start,1000)};
</script>
</html>
