21.页面滚动显示-开店乐

开店乐

开店乐电子商务研究 KaiDianLe.Com

网站地图 : 一二三四五六七八九十

主页

21.页面滚动显示

| 回首页 | 网站地图 | 网络技术 >> 网页特效

有时我们公告窗口中的内容较多，而公告窗口又不能设定的太大，如果加上滚动条则会影响浏览效果，这时让窗口中的内容自行滚动会是一个不错的解决方法，下面我们看看怎样用几句简单的JavaScript语句来实现它。

　　点击下面的“打开自滚动窗口”按钮，你就能看到滚动显示的效果，而如果你点击“主窗口自行滚动”你会发现，连这个窗口也滚动起来。 【来自：开店乐www.KaiDianLe.Com】

　　源码粘贴框：

1.主窗口自行滚动的JavaScript代码： <script language="JavaScript"> <!-- locate = 0; function scroller() { if (locate !=400 ) { locate++; scroll(0,locate); clearTimeout(timer); var timer = setTimeout("scroller()",3); timer; } } </script> 如果你想让窗口打开时即开始滚动，你可以在 <body>与</body>之间加上onload语句，如下所示： <body onload="scroller();"> 2.公告窗口循环滚动的JavaScript代码: 你可以把它插入公告窗口的<head>中 <script language="JavaScript"> <!-- locate = 0; function scroller() { if (locate !=600 ) { locate++; scroll(0,locate); clearTimeout(timer); var timer = setTimeout("scroller()",3); timer; } else{locate=0 scroll(0,locate); clearTimeout(timer); var timer = setTimeout("scroller()",3); timer; } } // -－> </script> 然后在<body>中加入onload()语句。要注意的是：上面代码中locate的值应该根据你所制作的页面的高度适当调整。

　　下面我们来试着做一下吧。

　　1、你可以看到主页面的滚动只有一次，而不是循环滚动的，这样的滚动实现起来简单一些，我们只须在主页面的<head>与</head>之间插入一段JavaScript代码，这段代码中包含了一个scroller()函数。

　　如果要在按钮按下开始滚动，我们可在如下图所示位置加上onclick()语句，它的作用是当按钮被点击时调用scroller()函数。

　　而如果你想要主页面一打开就自行滚动，你只须在<body>与</body>之间加入“onload="scroller();"”语句，它的意思是页面加载时即调用scroller()函数。

　　2、循环滚动的公告窗口实现起来稍微要复杂一些，首先插入公告窗口<head>与</head>之间的JavaScript代码要做修改，如下面所示：

代码解释

　　然后在公告窗口的<body>中加入“onload="scroller();"”语句；最后我们需要在主页面中打开这个公告窗口，方法同样是在主页面的<body>中加入onload语句。如果你对实现公告窗口还不清楚的话，你可以参照一下第12个网页制作技巧“怎样实现公告窗口”的内容。

　　经过以上的步骤，会循环滚动的公告窗口就完成了，这样滚动窗口有时是非常有用的，怎么用？那就要看你的了。

【日期：2006-10-9】【作者：网上开店】【转载自：http://www.kaidianle.com】