javascript无缝水平滚动实例

cpine

浏览: 54497 次
性别:
来自: 长沙

最近访客更多访客>>

龙虎天翔

echoios

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ASP.NET

JavaScript CSS HTML

首先看源代码：

<html>
<head>
<title>无缝滚动实例--左右滚动</title>
<style type="text/css">
img { border:none; margin:0px; }
#demo { width:600px; overflow:hidden; height:120px; border:solid 3px red; }
#demo1 { float:left; width:766px; }
#demo2 { float:left; width:766px; }

#clear { clear:both; }
</style>
</head>

<body>
<div id="demo">
<div id="marquee">
   <div id="demo1">
    <img src="images/js01.jpg" width="120" height="120" />
    <img src="images/js02.jpg" width="120" height="120" />
    <img src="images/js03.jpg" width="120" height="120" />
    <img src="images/js04.jpg" width="120" height="120" />
    <img src="images/js05.jpg" width="120" height="120" />
    <img src="images/js06.jpg" width="120" height="120" />
   </div>

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

<div id="clear">&nbsp;</div>

<script type="text/javascript">
var speed = 10;
var demo = document.getElementById("demo");
var demo1= document.getElementById("demo1");
var demo2= document.getElementById("demo2");
var marquee = document.getElementById("marquee");

demo2.innerHTML = demo1.innerHTML;
marquee.style.width = demo1.offsetWidth * 2;
function fMarquee()
{
if(demo2.offsetWidth - demo.scrollLeft <= 0) { demo.scrollLeft -= demo2.offsetWidth; }
else { demo.scrollLeft++; }
}

var myMarquee = setInterval(fMarquee,speed);
demo.onmouseover = function() { clearInterval(myMarquee); }
demo.onmouseout = function() { myMarquee = setInterval(fMarquee, speed); }
</script>
</body>

</html>

代码结束。

基本原理与垂直滚动效果是一样的，只不过，在布局的时候发生了一点小小的改变。

他的结构应该是这样的

<div id="demo">
<div id="marquee">
    <div id="demo1">
      content...
    </div>
    <div id="demo2"></div>
</div>
</div>

用demo包含所有的内容。而且demo必须制定宽度和高度，且overflow:hidden;必须加上。其实demo指定的是滚动框的高度和宽度。

用marquee包含所有的内容，与demo不同的是，marquee的宽度是刚好够放下demo1与demo2的内容的（横向排列，所以需要float:left; 而且宽度要设置。）

接下来的是用javascript将marquee的宽度设置为两倍demo1的宽度。marquee.style.width = demo1.offsetWidth * 2; 以确保demo1与demo2是横向排列的。

在滚动时，若demo的scrollLeft已经到超过了demo2的宽度，说明应该重新开始了。用

if(demo2.offsetWidth - demo.scrollLeft <= 0) { demo.scrollLeft -= demo2.offsetWidth; }
else { demo.scrollLeft++; }

最后用var myMarquee = setInterval(fMarquee, speed) 重复滚动。

分享到：

javascript实现垂直无缝滚动详解 | 分页查询的SQL存储过程

2010-01-30 14:42
浏览 2616
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论