QQ 1640076782

2010年08月27日

网站常见的无缝滚动效果

Filed under: 未分类 — 标签： — past @ 6:15 上午

              最近在修改一个外贸电子网站时碰到一个在很多网站都能看到的一个向上滚动的图片或文字，这个网站之前是用marquee属性来写的
（<marquee direction=“滚过的方向” scrollamount=“运动速度” scrolldelay=“停顿时间”onmouseover=”this.stop（）” onmouseout=”this.start()” width=”100%”   height=”100%”>向上滚动效果</marquee>） 这样代码简单易用，对于一些没要求无缝滚动的功能来说是一个很好的选择，但有很多是需要无缝滚动的，那这个简单易用的marquee属性就不再适用了。因为它开始时是没有填满你设定的高宽度的。只能从一边慢慢地滚动填满到另一边，这样给人感觉它开始时好像是不完整的。那要怎样才能实现无缝滚动呢？只能用JS来实现。具体如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无缝向上滚动</title>
</head>
<style type=”text/css”>
 *{ margin:0; padding:0;}
 body{ margin:0; padding:0;}
 #demo{overflow:hidden; height:50px; width:220px; border:1px solid #000;}
</style>
<body>
<div id=”demo”>
 <div id=”demo1″>
       <a href=”#”>无缝向上滚动效果</a><br />
       <a href=”#”>无缝向上滚动效果</a><br />
       <a href=”#”>无缝向上滚动效果</a><br />
       <a href=”#”>无缝向上滚动效果</a><br />
       <a href=”#”>无缝向上滚动效果</a><br />
       <a href=”#”>无缝向上滚动效果</a><br />
       <a href=”#”>无缝向上滚动效果</a><br />
 </div>
 <div id=”demo2″></div>
</div>

<script>
   var speed=50
   var demo=document.getElementById(“demo”);
   var demo2=document.getElementById(“demo2″);
   var demo1=document.getElementById(“demo1″);
   demo2.innerHTML=demo1.innerHTML
   function Marquee(){
   if(demo2.offsetTop-demo.scrollTop<=0)
   demo.scrollTop-=demo1.offsetHeight
   else{
   demo.scrollTop++
   }
   }
   var MyMar=setInterval(Marquee,speed)
   demo.onmouseover=function() {clearInterval(MyMar)}
   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>
请看效果

注意:1.不要漏掉<div id=demo2></div>(因为无缝滚动实现的原理实际上是构造2个容器，把第一个容器的内容写入到第二个容器中从而达到无缝的效果。).
         2.滚动的高度要根据内容来设，其高度要小于内容的总高度一半以下才不会出现走了一会就停了。