JavaScript实现无缝滚动 原理详细讲解

 

先了解一下对象的几个的属性：

 

innerHTML: 设置或获取位于对象起始和结束标签内的 HTML

 

scrollHeight: 获取对象的滚动高度。

 

scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

 

scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

 

scrollWidth: 获取对象的滚动宽度

 

offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

 

offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

 

offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

 

offsetWidth: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

图片向上无缝滚动

 

 

<style type="text/css">

<!--

#demo {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

height: 100px;

text-align: center;

float: left;

}

#demo img {

border: 3px solid #F2F2F2;

display: block;

}

-->

</style>

向上滚动

<div id="demo">

<div id="demo1">

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

</div>

<div id="demo2"></div>

</div>

 

<script>

<!--

var speed=10; //数字越大速度越慢

var tab=document.getElementById("demo");

var tab1=document.getElementById("demo1");

var tab2=document.getElementById("demo2");

tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2

function Marquee(){

if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时

tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端

else{

tab.scrollTop++

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器

-->

</script>

 

 

图片向左无缝滚动

 

 

<style type="text/css">

<!--

#demo {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

500px;

}

#demo img {

border: 3px solid #F2F2F2;

}

#indemo {

float: left;

800%;

}

#demo1 {

float: left;

}

#demo2 {

float: left;

}

-->

</style>

向左滚动

<div id="demo">

<div id="indemo">

<div id="demo1">

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/

 

other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

</div>

<div id="demo2"></div>

</div>

</div>

 

<script>

<!--

var speed=10; //数字越大速度越慢

var tab=document.getElementById("demo");

var tab1=document.getElementById("demo1");

var tab2=document.getElementById("demo2");

tab2.innerHTML=tab1.innerHTML;

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft<=0)

tab.scrollLeft-=tab1.offsetWidth

else{

tab.scrollLeft++;

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

-->

</script>

 

 

 

 

 

Javascript特效：实现间歇无缝滚动效果

 

处理页面中的间歇无缝滚动新闻的时候，最常见的方法就是将滚动区内容复制追加一份，然后通过控制和判断滚动块的scrollTop来实现滚动停止效果。

 

其实在很多情况下通过节点操作实现间歇无缝滚动要更加容易些。

 

代码如下：

 

<script language="javascript" type="text/javascript">

window.onload=function(){

var o=document.getElementById('box');

window.setInterval(function(){scrollup(o,24,0);},3000);

}

///滚动主方法

///参数:o 滚动块对象

///参数:d 每次滚屏高度

///参数:c 当前已滚动高度

function scrollup(o,d,c){

if(d==c){

var t=getFirstChild(o.firstChild).cloneNode(true);

o.removeChild(getFirstChild(o.firstChild));

o.appendChild(t);

t.style.marginTop="0px";

}else{

c+=2;

getFirstChild(o.firstChild).style.marginTop=-c+"px";

window.setTimeout(function(){scrollup(o,d,c)},20);

}

}

//解决firefox下会将空格回车作为节点的问题

function getFirstChild(node){

while (node.nodeType!=1)

{

node=node.nextSibling;

}

return node;

}

</script>

<ul id="box">

<li>· <a href="http://www.dwww.cn">网页设计家园 http://www.dwww.cn</a></li>

<li>· <a href="http://www.dwww.cn">最新最全的网页教程</a></li>

<li>· <a href="http://www.dwww.cn/cool">韩国网站欣赏</a></li>

<li>· <a href="http://www.dwww.cn/photo">banner，flash banner欣赏</a></li>

</ul>

效果：

 

<style type="text/css">

<!--

*{ margin:0px; padding:0px;}

#box{300px; height:24px;overflow:hidden; font-size:12px; background:#efefef;}

#box li{ list-style:none; line-height:24px;}

-->

</style>

<script language="javascript" type="text/javascript">

window.onload=function(){

var o=document.getElementById('box');

window.setInterval(function(){scrollup(o,24,0);},3000);

}

function scrollup(o,d,c){

if(d==c){

var t=getFirstChild(o.firstChild).cloneNode(true);

o.removeChild(getFirstChild(o.firstChild));

o.appendChild(t);

t.style.marginTop="0px";

}else{

c+=2;

getFirstChild(o.firstChild).

 

style.marginTop=-c+"px";

window.setTimeout(function(){scrollup(o,d,c)},20);

}

}

function getFirstChild(node){

while (node.nodeType!=1)

{

node=node.nextSibling;

}

return node;

}

</script>

<ul id="box">

<li>· <a href="http://www.dwww.cn">网页设计家园 http://www.dwww.cn</a></li>

<li>· <a href="http://www.dwww.cn">最新最全的网页教程</a></li>

<li>· <a href="http://www.dwww.cn/cool">韩国网站欣赏</a></li>

<li>· <a href="http://www.dwww.cn/photo">banner，flash banner欣赏</a></li>

</ul>