水平方向无缝滚动
滚动支持图片，文字
原理 ：
一个大的盒子中放置两个盒子，通过设置offsetWidth，scrollLeft的关系来实现，而且还用到定时器
函数setInterval，当手指移动上去定义滚动，离开继续滚动。兼容各大浏览器。
HTML代码
rush:css;">
#demo{
width:1000px;
height:30px;
overflow:hidden;
line-height:30px;
font-size:13px;
font-family:'宋体';
background:#ddd url(images/notice.png) no-repeat 25px center;
color:#0C77CF;
font-weight:bold;
margin: 0 auto;
}
#demoin {
width: 900px;
height: 30px;
margin: 0 auto;
white-space:
Nowrap;
overflow: hidden;
}
#demo #demo1,#demo #demo2{
display:inline}
rush:js;">
window.onload = function(){
scrollLeft();
};
function scrollLeft(){
var speed = 20;
var tab = document.getElementById('demoin');
var tab1 = document.getElementById('demo1');
var tab2 = document.getElementById('demo2');
tab2.innerHTML = tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth - tab.scrollLeft <=0) {
tab.scrollLeft = 0;
}else{
tab.scrollLeft ++;
}
}
var timer = setInterval(Marquee,speed);
tab.onmou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ver = function(){
clearInterval(timer);
};
tab.onmou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ut = function(){
timer = setInterval(Marquee,speed);
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
