制作图片上的滚动效果

作者：创新互联文章来源：网站建设部点击数：更新时间：2010-04-04
　　在网页制作上，设计师们为了让浏览者们有最好的体验效果，可谓是绞尽脑汁，设计出很多的浏览效果，比如说MouseOver和MouseOut效果，就是网页中比较流行的一种做法，当鼠标移动到某一幅图片上方时，原有的图片会变色或者成为另一张图片。尽管我们根本不用考虑javascript程序代码的编写，我们还是应该对后台发生的事件有一点了解，掌握翻滚效果是如何运作的：当鼠标经过web页面中某一个图形时，它会自动被另外一副预定的图形替换。所以，虽然制作软件有所不同，方法也有区别，但是基本的原理是一致的。不管在哪个软件中制作翻滚效果，有三样东西不可缺少：原始图形、替换图形、控制图形切换的javascript动作。那这些又该怎么操作呢？看成都创新互联网站建设的小编跟大家分享的操作步骤。

　　第一步，使用photoshop制作两幅图片，由于这个特效一般用于菜单的制作，因此使用photoshop制作两幅不同底色的图片。制作的方法很简单，使用“文件/新建”创建两个尺寸相同的文件，再使用文字工具输入相同的文字，然后使用油漆桶工具为这两个文件涂上不同的颜色。然后，将这两幅图片保存成名为w1和w1_2的GIF或JPEG格式的文件。

　　第二步，打开Dreamweaver，下面的工作要使得上方菜单中的“网络相关”的图片产生鼠标上滚效果。选中网络相关这幅图片，即刚才命名的w1文件，选择window/behavior3打开行为面板。然后单击面板中的“+”号，从弹出的菜单中选中SwapImage。

　　第三步，在弹出的窗口中单击Browse按钮，选中刚才制作的w1_2文件，也就是鼠标移动到图片上方时变化后的图片。此外，当鼠标移动到图片上时，由于显示over或out的图片是需要一定的读取时间的,所以会产生一定的延迟感，真是“大煞风景”。为了防止鼠标上滚后第二幅图片的显示会有所延迟，可以在上面的对话框中选中PreloadImages复选框，使得所有图片均预先载入。最后单击“OK”按钮，这样翻滚的效果就制作成功了。

　　大家可以根据这种原理，来深化研究，也许还可以有更好的效果产生呢。欢迎大家和成都创新互联网站建设的小编一起来交流体验哦。
网页图像切图与压缩 :上一篇
什么网站算好站? :下一篇

网站建设

服务器租用

企业邮箱

虚拟主机

网站程序

营销推广

域名注册

前端开发

网站备案

移动互联网

制作图片上的滚动效果

制作图片上的滚动效果

网站制作相关文章