以前的滚动看板都是用Java applet来实现的,但Java applet最大的缺点就是启动速度慢,后来有人用javascript实现了这个效果,现在有了Dreamweaver,即使不会编写javascript也可以依靠Dreamweaver的强大功能来实现,好了,不废话了,开始吧!
注意:本教程以下步骤都将以制作垂直滚动看板为准
要实现这个效果首先需要两个层:一个是父层,作为“遮罩层”,一个子层,用来放置滚动内容,并且子层要嵌套在父层之中。我们先来制作这两个层:
1、先创建一个层,此层作为子层,命名为layer2,在这一层中你可以任意放置你想要的内容,包括文本、图片、链接等等,但要注意一点,这个子层的宽度一定不能大于即将创建的父层的宽度(这时高度不受限制);当然如果你做的是水平滚动的看板,那就要保证子层的高度不可以大于父层的高度(此时宽度不受限制)。
2、在你需要的位置再创建一个符合你要求大小的层,这个层为父层,命名为layer1。
下面一步是要将子层嵌套到父层之中。
3、按F11打开层面板,按住Ctrl键不放,用鼠标左键将layer2拖到layer1上,松开鼠标左键再松开Ctrl键,OK!看见了吗?层面板上layer1旁边出现了一个小加(减)号,layer2已经嵌套在layer1里了。
下一步很关键,是将layer1变为“遮罩层”。
4、先选中layer1,按Ctrl+F3打开Properties面板,点击Properties面板右下角的小三角箭头,打开Properties的扩展面板,看见Clip这个属性了吗?这个属性是设定层的可见范围的。现在我们将L和T的值都设成0,R的值设成和layer1的宽度一样,B的值设成和layer1的高度一样,这样layer1的可见范围就和layer1本身一样大。遮罩层就做好了!
好了,该让layer2滚动起来了。
5、先选中layer2,右键单击layer2左上角的控制柄(那个小方框),在弹出的菜单中选择Add to Timeline,这时Timelines面板被打开,并且可以看到layer2被加入到Timeline1中。
6、先在Timelines面板中选中第一帧,然后再用layer2左上角的控制柄将layer2拖放到你打算开始播放的位置。接着再在Timelines面板中选中最后一帧,再将layer2拖放到你打算结束播放的位置。最后勾选上Timelines面板中的Autoplay选项(这样你的看板才能自动开始滚动)。当然如果你需要你的看板循环播放,还要勾选Loop这一项,否则将只播放一次。
注:你可以左右拖动Timeline1的最后一帧来控制合适的播放速度
7、保存,完成,在浏览器里打开看看效果吧!
怎么样,很简单吧?其实用上述方法再加以扩展可以做出很多不错的效果,大家自己揣摩去吧!
本文作者: