javascript无缝水平滚动实例

最新推荐文章于 2023-07-12 13:16:30 发布

iteye_18384

最新推荐文章于 2023-07-12 13:16:30 发布

阅读量117

点赞数

分类专栏： ASP.NET 文章标签： JavaScript CSS HTML ViewUI

本文链接：https://blog.csdn.net/iteye_18384/article/details/81822266

版权

ASP.NET 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

首先看源代码：

<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) 重复滚动。

iteye_18384

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript无缝水平滚动实例

首先看源代码：&lt;html&gt;&lt;head&gt;&lt;title&gt;无缝滚动实例--左右滚动&lt;/title&gt;&lt;style type="text/css"&gt;img { border:none; margin:0px; }#demo { width:600px; overflow:hidden; height:120px; borde...
复制链接

扫一扫