在网络时代的今天，各行各业对于网络的依赖日益增加，很多公司都希望有一个展示自己公司形象以及产品的网络平台。对于以网站建设制作为主要服务的公司以及网站设计从业人员的设计技巧来说是一个激励。本文今天就这个话题，分享我们的网页设计师是如何应客户的要求在网页开篇设计一个弹跳的小球以增加网站的互动性视觉效果。制作弹跳的小球，弹跳特效指的是任何调用该方法的对象都被设置为弹跳显示效果，利用该效果可以设计各种晃动行为，以便设计一种富有动态化的交互视觉。
深圳网站设计公司本示例利用iQuerv弹跳特效没汁交互行为，当在鼠标经过小球时呈现弹跳显示效果，以增强界面的游戏互动特性。
【操作步骤】
第1步，启动Dremuweaver，打开本节示例中的orig.html文件，另存为effect.htnll。
第2步，把光标置于页面中，选择【插入】【图像】【图像】命令，在页面中插入个小球，在【属性】面板中设置小球宽度)为300像素，如图7-52所示。
网站设计互动效果实操示意图7-52插入小球
第3步，选中标签<div id:”apDivl”>，选择【窗口】 【行为】命令，打开【行为】面板，单击加号按钮，从弹出的下拉菜单中选择【效果】 Bounce命令，如图7-53所示。
第4步，打开Bounce对话框，设置【目标元素】为“<当前选定内容>”，【效果持续时间】为1OOOms，即秒钟；设置【可见性】为hide，即效果结束后隐藏元素；设置【方向】为up，即定义目标对象向上弹跳，定义【距离】为50像素，【次】为5次，设置如图7-54所示。设置完毕，单击【确定】按钮完成操作。第5步，在【行为】面板中可以看到新增加的行为，单击左侧的onClick，从弹出的下拉菜单中选择onMouseOver，即设计当鼠标经过正文区域时，将触发弹跳特效，设置如图7-55所示。
网站设计弹跳球实操示意图7-55修改触发事件
第6步，继续懂仿第3、4、5步操作，再添加个Bounce特效，设置【目标元素为“<当前选定内容>’【效果持续时间】为lOOOms，即1秒钟；没置【可见性】show，即效果结束后显示元素；设置【方向】为up，即定更目标对象向上弹跳，定义【距离】为50像素，设置完毕，单击【确定】按钮完成操作。
第7步，在【行为】面板中修改事件类型，单击左侧的onClick，从弹出的下拉菜单中选择onMouseOver，即设计当鼠标经过时，将触发弹跳特效，然后单击向下箭头按钮，把当前行为移到下面，让该行为在上步定义的行为之后发生，设置如图7-57所示。
网站设计弹跳球效果实操示意图修改触发事件并调整响应顺序
第8步按Ctrl+S快捷键保存页面，此时Dreamweaver会弹出对话框，提示保存两个插件文件，如图7-58所示。单击【确定】按钮，保存jquerv-l.8.3min.jsjquery-ui-effectscustommin.js两个库文件。
第9步，在浏览器中预览，当鼠标移到摘要正文上时，文字会高亮显示并逐步隐藏，然后再恢复正常显示，演示效果如图7-59所示。
提示：Dreamweaver定制的iQuery高亮特效，实际上与iQuery原生的高亮特效所产生的效果是不同的，Dreamweaver强化了高亮显示后显示或隐藏对象，而不是保持对象默认的显示状态。因此．Dreamweaver的高亮特效适合设计渐隐、渐显特效。如果希望使用Dreamweaver的Highlight特效设计高亮显示，必须使用两Highlight行为叠加设计，方法如本文示例。深圳网站设计公司关于网站制作时在页面设计弹跳球效果的实操案例经验分享，本文就到这里。喜欢本站的朋友请持续关注本站。博纳网络编辑整理。
当前文章链接：/construction/jzhyzx/1540.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
