|
内容不间断向左滚动，相当于不断向右移动滚动条，内容向左滚动。 要点一：scrollLeft 使用： id.scrollLeft 例如下面的简单的例子，当文字向左滚动的时候，就可以看到滚动条在向右移动 要点二：setInterval 使用：var timer = setInterval(func,100); 每隔多长时间，执行一次 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
body,div{margin:0;padding:0;}
.wrapper{width:200px; height:50px; line-height:30px; overflow-x:scroll; overflow-y:hidden; border:1px solid #ccc;}
.w1{width:400px;}
</style>
</head> <body> <div id="s" class="wrapper">
<div class="w1">内容1内容2内容3内容4内容5内容6内容7</div>
</div> <script>
function scroll(){
var a = document.getElementById("s");
a.scrollLeft++;
}
var timer = setInterval(scroll,50);
</script> </body>
</html>
复制代码 要点三：offsetWidth 对象的可见宽度，包括滚动条等边线，会随窗口的显示大小改变
要点四：innerHTML 设置或获取位于对象起始和结束标签内的HTML <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style> body,div{margin:0;padding:0;}
body{padding:20px;}
#box{width:300px; height:50px; line-height:30px; overflow-x:scroll; overflow-y:hidden; border:1px solid #ccc;}
#c{width:800px;}
#c1,#c2{width:400px;float:left;} </style>
</head> <body> <div id="box">
<div id="c">
<div id="c1">内容1内容2内容3内容4内容5内容6内容7</div>
<div id="c2"></div>
</div>
</div> <script>
var c1 = document.getElementById("c1");
var c2 = document.getElementById("c2");
c2.innerHTML = c1.innerHTML; function scroll(){
var a = document.getElementById("box"); if(a.scrollLeft >= c2.offsetWidth){
a.scrollLeft=0;
}else{
a.scrollLeft++;
}
}
var timer = setInterval(scroll,60);
</script> </body>
</html>
复制代码
说明：
让box的scrollLeft++，就可以向左滚动。要做到一直不间断向左滚动，需要做判断，如果scrollLeft的值等于或大于c2的宽度时，把scrollLeft的值设为0，这样就会一直循环。
把id为c1的内容赋予c2，这样可以在滚动的时候肉眼就会看不到变化
现在已经可以滚动了，下面加上鼠标移上滚动停止，鼠标移出，滚动继续的效果。
现在是向左滚动，如果向右滚动，可以用如下代码
if(a.scrollLeft <= 0){
a.scrollLeft+=c1.offsetWidth;
}else{
a.scrollLeft--;
}
当元素左滚动距离小于0时，让他的左滚动距离为一半的宽度，否则让左滚动的值--
要点五：clearInterval 取消由 setInterval() 设置的 timeout
c1.onmouseover = function(){
clearInterval(timer);
}
c1.onmouseout = function(){
timer = setInterval(scroll,60);
}
在上面的代码中现加上这两行，就可以鼠标移上停止滚动，鼠标移出滚动继续了。
虽然有点啰嗦，但是现在可以实现控制左右无缝滚动的效果了，
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style> body,div{margin:0;padding:0;}
body{padding:20px;}
#box{width:300px; height:50px; line-height:30px; overflow-x:scroll; overflow-y:hidden; border:1px solid #ccc; float:left; margin:0 10px; display:inline;}
#c{width:800px;}
#c1,#c2{width:400px;float:left;}
#prev,#next{width:50px; height:50px; line-height:50px; text-align:center; background:#ccc; cursor:pointer; float:left;}
.wrap{width:500px;} </style>
</head> <body> <div class="wrap"> <div id="prev"><<</div> <div id="box">
<div id="c">
<div id="c1">内容1内容2内容3内容4内容5内容6内容7</div>
<div id="c2"></div>
</div>
</div>
<div id="next">>></div>
</div>
<script>
var c1 = document.getElementById("c1");
var c2 = document.getElementById("c2");
var a = document.getElementById("box");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var timer ;
c2.innerHTML = c1.innerHTML;
function scroll_l(){ if(a.scrollLeft >= c1.offsetWidth){
a.scrollLeft=0;
}else{
a.scrollLeft++;
}
}
function scroll_r(){ if(a.scrollLeft <= 0){
a.scrollLeft+=c1.offsetWidth;
}else{
a.scrollLeft--;
}
}
timer = setInterval(scroll_l,60);
a.onmouseover = function(){
clearInterval(timer);
}
a.onmouseout = function(){
timer = setInterval(scroll_l,60);
}
prev.onclick = function(){
clearInterval(timer);
change(0);
}
next.onclick = function(){
clearInterval(timer);
change(1)
}
function change(r){
if(r==0){
timer = setInterval(scroll_l,60);
a.onmouseout = function(){
timer = setInterval(scroll_l,60);
}
}
if(r==1){
timer = setInterval(scroll_r,60);
a.onmouseout = function(){
timer = setInterval(scroll_r,60);
}
}
} </script> </body>
</html>
|
