无缝滚动

本文主要介绍,向上的无缝滚动

方法一:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>图片滚动</title>

</head>

<body>

<style type="text/css">

<!--

#demo {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

margin-top:90px; 

height: 300px;

text-align: center;

float: left;

}

#demo img {

border: 3px solid #F2F2F2;

display: block;}



-->

</style>

<div id="demo">

<div id="demo1">

<a href="#"><img src="../img/12.jpg" border="0" /></a>

<a href="#"><img src="../img/22.jpg" border="0" /></a>

<a href="#"><img src="../img/21.jpg" border="0" /></a>

</div>

</div>

<script>

<!--

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

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

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

function Marquee(){

if(tab1.offsetHeight-tab.scrollTop<=0){//当滚动至demo1底部时

tab.scrollTop=0; //demo跳到最顶端

}

else{

tab.scrollTop++

}

}

var MyMar=setInterval(Marquee,speed);

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

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

-->

</script>

</body>

</html>

  方法二:

<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>

 两种方式的不同之处就在于javascript中的tab.scrollTop跳转,方法二主要是克隆了demo1,使得在出现某些状况的时候(网速卡等),在一定时间里能够使滚动看起来仍然可以是无缝滚动。

 

你可能感兴趣的:(无缝滚动)