100分（解释无缝滚动的代码）

Question

<style>
a {font-size:12px;} 
.dhMarquee {width:500px;height:30px;line-height:30px;text-align:left;margin:0px;padding:0px;border:1px solid #000;overflow:hidden;white-space:nowrap;} 
.mqdemo {margin:0px;padding:0px;border:0px;}
</style> 
<div id="mq" class="dhMarquee" onmouseover="iScrollAmount=0" onmouseout="iScrollAmount=1"> 
<span id="mqdemo" class="mqdemo"> 
<a href="javascript:alert('1')">月圆之夜</a> 
<a href="javascript:alert('2')">紫禁之颠</a> 
<a href="javascript:alert('3')">西门吹雪</a> 
<a href="javascript:alert('4')">天外飞仙</a> 
</span> 
</div> 
<script language="javascript"> 
var speed = 90; 
//判断浏览器类型
var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
//滚动对象 
var oMarquee = document.getElementById("mq");
//内容对象 
var omqdemo = document.getElementById("mqdemo");
var w = oMarquee.offsetWidth;
var odl = omqdemo.offsetWidth;
var x = parseInt(w/odl)+1;//1：此处为什么+1，加更多不可以么？
for(var i=0;i<x;i++){
 var o = omqdemo.cloneNode(true);
 oMarquee.appendChild(o);
}
var iScrollAmount = 1
function scroll(){
 oMarquee.scrollLeft += iScrollAmount;
 var ol = oMarquee.scrollLeft;
 //IE和FF的位置有不同
 if(isMSIE){
  if(odl-ol<=0){//2：这句话的作用
   oMarquee.scrollLeft = 0;
  }
 }else{
  if(odl-ol<=-10){
   oMarquee.scrollLeft = 2;
  }
 }
}
var MyMar = window.setInterval(scroll,speed); 
</script>请看对应1，2的提问，然后总结下 无缝滑动的原理 懂了就结贴 

Answer 1

关键是scrollLeftscrollLeft:返回和设置当前横向滚动务的坐标值 http://zhidao.baidu.com/question/14206879.html //看这个例子，这个移动的比较大 ，就大概知道原理了2的判断就是移动出他外面的容器的时候，让他回到初始位置再移动

Answer 2

2是判断移出外面容器？但odl是里面的容器span阿？

Answer 3

<style>
a {font-size:12px;} 
.dhMarquee {width:500px;height:30px;line-height:30px;text-align:left;margin:0px;padding:0px;border:1px solid #000;overflow:hidden;white-space:nowrap;} 
.mqdemo {margin:0px;padding:0px;border:0px;}
</style> 
<div id="mq" class="dhMarquee" onmouseover="iScrollAmount=0" onmouseout="iScrollAmount=1"> 
<span id="mqdemo" class="mqdemo"> 
<a href="javascript:alert('1')">月圆之夜</a> 
<a href="javascript:alert('2')">紫禁之颠</a> 
<a href="javascript:alert('3')">西门吹雪</a> 
<a href="javascript:alert('4')">天外飞仙</a> 
</span> 
</div> 
<script language="javascript"> 
var speed = 90; 
//判断浏览器类型
var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
//滚动对象 
var oMarquee = document.getElementById("mq");
//内容对象 
var omqdemo = document.getElementById("mqdemo");
var w = oMarquee.offsetWidth;
var odl = omqdemo.offsetWidth;
var x = parseInt(w/odl)+10;//1：此处为什么+1，加更多不可以么？可以加更多，比如加10，这个只是下面循环产生多少子项的
for(var i=0;i<x;i++){
 var o = omqdemo.cloneNode(true);
 oMarquee.appendChild(o);
}
var iScrollAmount = 1
function scroll(){
 oMarquee.scrollLeft += iScrollAmount;
 var ol = oMarquee.scrollLeft;
 //IE和FF的位置有不同
 if(isMSIE){
  if(odl-ol<=0){//2：这句话的作用，这个作用主要是判断起始位置的，不同编辑器值不同
   oMarquee.scrollLeft = 0;
  }
 }else{
  if(odl-ol<=-10){
   oMarquee.scrollLeft = 2;
  }
 }
}
var MyMar = window.setInterval(scroll,speed); 
</script>

Answer 4

第一点为了你更加理解
你可以改成这样你就明白了var x = parseInt(w/odl)+10;//1：此处为什么+1，加更多不可以么？
for(var i=0;i<x;i++){
 var o = omqdemo.cloneNode(true);
 o.innerText=omqdemo.innerText+i;
 oMarquee.appendChild(o);
}你改成这样你就明白了

Answer 5

第一点补充一下：
因为下面的公式是定的，所以你加1和10和100没有太大的区别
因为IE下当odl-ol<=0时又从头开始，FF下odl-ol<=-10时就从头开始

Answer 6

<style>
a {font-size:12px;} 
.dhMarquee {width:500px;height:30px;line-height:30px;text-align:left;margin:0px;padding:0px;border:1px solid #000;overflow:hidden;white-space:nowrap;} 
.mqdemo {margin:0px;padding:0px;border:0px;}
</style> 
<div id="mq" class="dhMarquee" onmouseover="iScrollAmount=0" onmouseout="iScrollAmount=1"> 
<span id="mqdemo" class="mqdemo"> 
<a href="javascript:alert('1')">月圆之夜</a> 
<a href="javascript:alert('2')">紫禁之颠</a> 
<a href="javascript:alert('3')">西门吹雪</a> 
<a href="javascript:alert('4')">天外飞仙</a> 
</span> 
</div> 
<script language="javascript"> 
var speed = 10; 
//判断浏览器类型
var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
//滚动对象 
var oMarquee = document.getElementById("mq");
//内容对象 
var omqdemo = document.getElementById("mqdemo");
var w = oMarquee.offsetWidth;
var odl = omqdemo.offsetWidth;
var x = parseInt(w/odl)+100;//1：此处为什么+1，加更多不可以么？
for(var i=0;i<x;i++){
 var o = omqdemo.cloneNode(true);
 o.innerText=omqdemo.innerText+i;
 oMarquee.appendChild(o);
}
var iScrollAmount = 1
function scroll(){
 oMarquee.scrollLeft += iScrollAmount;
document.getElementById("aa").innerHTML=oMarquee.scrollLeft;
 var ol = oMarquee.scrollLeft;
 //IE和FF的位置有不同
 if(isMSIE){
  if(odl-ol<=0){//2：这句话的作用
   oMarquee.scrollLeft = 0;
  }
 }else{
  if(odl-ol<=-10){
   oMarquee.scrollLeft = 2;
  }
 }
}
var MyMar = window.setInterval(scroll,speed); 
</script>
<div id="aa"></div>一个完整的例子给你自己去测试，你自己测试看看是不是
仔细看下<div id="aa"></div>的值的变化

Answer 7

没有
你加再多也没用
因为IE下当odl-ol <=0时又从头开始，FF下odl-ol <=-10时就从头开始

Answer 8

改成这样你看就知道了，刚好衔接上了
<style>
a {font-size:12px;} 
.dhMarquee {width:500px;height:30px;line-height:30px;text-align:left;margin:0px;padding:0px;border:1px solid #000;overflow:hidden;white-space:nowrap;} 
.mqdemo {margin:0px;padding:0px;border:0px;font-size:12px;}
</style> 
<div id="mq" class="dhMarquee" onmouseover="iScrollAmount=0" onmouseout="iScrollAmount=1"> 
<span id="mqdemo" class="mqdemo"> 
<a href="javascript:alert('1')">月圆之夜</a> 
<a href="javascript:alert('2')">紫禁之颠</a> 
<a href="javascript:alert('3')">西门吹雪</a> 
<a href="javascript:alert('4')">天外飞仙</a> 
</span> 
</div> 
<script language="javascript"> 
var speed = 10; 
//判断浏览器类型
var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
//滚动对象 
var oMarquee = document.getElementById("mq");
//内容对象 
var omqdemo = document.getElementById("mqdemo");
var w = oMarquee.offsetWidth;
var odl = omqdemo.offsetWidth;
var x = parseInt(w/odl)+1;//1：此处为什么+1，加更多不可以么？
for(var i=0;i<x;i++){
 var o = omqdemo.cloneNode(true);
 o.innerText=omqdemo.innerText+i;
 oMarquee.appendChild(o);
}
var iScrollAmount = 1
function scroll(){
 oMarquee.scrollLeft += iScrollAmount;
 document.getElementById("aa").innerHTML=oMarquee.scrollLeft;
 var ol = oMarquee.scrollLeft;
 //IE和FF的位置有不同
 if(isMSIE){
  if(odl-ol<=0){//2：这句话的作用
   oMarquee.scrollLeft = 0;
  }
 }else{
  if(odl-ol<=-10){
   oMarquee.scrollLeft = 2;
  }
 }
}
var MyMar = window.setInterval(scroll,speed); 
</script>
<div id="aa"></div>

Answer 9

这样也衔接上了，样式设置好了，那么产生的字项长度刚好等于了实际宽度得倍数，所以衔接上了
<style>
a {font-size:12px;} 
.dhMarquee {width:500px;height:30px;line-height:30px;text-align:left;margin:0px;padding:0px;border:1px solid #000;overflow:hidden;white-space:nowrap;} 
.mqdemo {margin:0px;padding:0px;border:0px;font-size:12px;}
</style> 
<div id="mq" class="dhMarquee" onmouseover="iScrollAmount=0" onmouseout="iScrollAmount=1"> 
<span id="mqdemo" class="mqdemo"> 
<a href="javascript:alert('1')">月圆之夜</a> 
<a href="javascript:alert('2')">紫禁之颠</a> 
<a href="javascript:alert('3')">西门吹雪</a> 
<a href="javascript:alert('4')">天外飞仙</a> 
</span> 
</div> 
<script language="javascript"> 
var speed = 10; 
//判断浏览器类型
var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
//滚动对象 
var oMarquee = document.getElementById("mq");
//内容对象 
var omqdemo = document.getElementById("mqdemo");
var w = oMarquee.offsetWidth;
var odl = omqdemo.offsetWidth;
var x = parseInt(w/odl)+10;//1：此处为什么+1，加更多不可以么？
for(var i=0;i<x;i++){
 var o = omqdemo.cloneNode(true);
 o.innerText=omqdemo.innerText+i;
 oMarquee.appendChild(o);
}
var iScrollAmount = 1
function scroll(){
 oMarquee.scrollLeft += iScrollAmount;
 document.getElementById("aa").innerHTML=oMarquee.scrollLeft;
 var ol = oMarquee.scrollLeft;
 //IE和FF的位置有不同
 if(isMSIE){
  if(odl-ol<=0){//2：这句话的作用
   oMarquee.scrollLeft = 0;
  }
 }else{
  if(odl-ol<=-10){
   oMarquee.scrollLeft = 2;
  }
 }
}
var MyMar = window.setInterval(scroll,speed); 
</script>
<div id="aa"></div><table> 
<tr> <td> 
<a id='a2' href="http://www.sina.com.cn"> 
<a id='a1' href="http://www.126.com"> 
<img border=0 ALT="blah blah blah" SRC="http://www.doulaicha.com/images/logo1.jpg"></a></a> 
</td> </tr> 
</table>
<h1 id='H1'>aaaaaaa</h1>
<div id='div1'>div1</div>
<div id='div2'>div2</div>
<p id='p1'>p1</p1><br/>
<a id='a2' href="http://www.sina.com.cn"><a id='a1' href="#"><img border=0 ALT="blah blah blah" SRC="http://www.doulaicha.com/images/logo1.jpg" id="aa11"></a></a>
<input type="text" id="txt1">
<script language="javascript">
document.onclick=Hanlder;
function Hanlder(e)
{
  e=e||event;
  var tag=e.srcElement||e.target;
  if(tag.id)
    alert(tag.id);
}
</script>

Answer 10

为了看到效果
采用了o.innerText=omqdemo.innerText+i;

Answer 11

当然也不要用o.innerHTML=omqdemo.innerHTML;
因为产生的子项跟母项一样，你就看不出是怎么衔接的了

Answer 12

1.既然lz知道获得的数值是用来循环产生子项的，那么就应该可以根据mq和mqdemo的尺寸计算出需要复制多少个子项来填满mq.
但parseInt不是四舍五入的。为了确保子项足够多，所以要加1。加100也可以，就是效率低。
2.是修正滚动值的。

Answer 13

1.既然lz知道获得的数值是用来循环产生子项的，那么就应该可以根据mq和mqdemo的尺寸计算出需要复制多少个子项来填满mq. 
但parseInt不是四舍五入的。为了确保子项足够多，所以要加1。加100也可以，就是效率低。晕，这么哪是与效率有关，你加100也好，加1000也好，只要IE下当odl-ol <=0时又从头开始，FF下odl-ol <=-10时就从头开始
也就是从0开始了2.是修正滚动值的这个这么说不是很正确，应该指的是从头开始，就是字符串重新开始滚动。你自己用我14楼的代码去验证就知道了

Answer 14

恩，该代码是偶编写的，参见：http://www.v-ec.com/dh20156/article.asp?id=6var x = parseInt(w/odl)+1;//1：此处为什么+1，加更多不可以么？
复制滚动内容，确保内容长度大于展示长度，为什么不可以更多？因为没有必要了 ^_^if(odl-ol<=0){//2：这句话的作用
判断内容是否滚动到结束位置原理其实很简单，因为不确定展示的宽度，所以必须填充足够多的滚动内容以填满展示区域，然后就开始滚动 ^_^为什么能衔接的这么好？这个就要靠你去观察了 ^_^