• <cite id="ls72a"></cite>

  • <rp id="ls72a"><nav id="ls72a"></nav></rp>
    <b id="ls72a"></b>

    在网页设计中制作弹跳的小球

    • 2019-11-15 15:28:49
    • 阅读次数:
    • 作者:盈岚科技小编
    • 来源:http://www.0737dz.com

    弹跳特效指的是在网站建设时,任何调用该方法的对象都被设置为弹跳显示效果,利用该效果可以设计各种晃动行为,以便在网页设计中设计一种富有动态化的交互视觉。本示例利用jQuery弹跳特效设计交互行为,当在鼠标经过小球时,呈现弹跳显示效果,以增强界面的游戏互动特性。

    【操作步骤】

    第1步,启动Dreamweaver,打开本节示例中的orig.html文件,另存为effect.html。

    第2步,把光标置于页面中,选择【插入】|【图像】|【图像】命令,在页面中插入一个小球,在【属性】面板中设置小球宽度为300像素。 

    第3步,选中标签<div id="apDiv1">,选择【窗口】|【行为】命令,打开【行为】面板,单击加号按钮,从弹出的下拉菜单中选择【效果】|Bounce命令。

    第4步,打开Bounce对话框,设置【目标元素】为“<当前选定内容>”,【效果持续时间】为1000ms,即一秒钟;设置【可见性】为hide,即效果结束后隐藏元素;设置【方向】为up,即定义目标对象向上弹跳,定义【距离】为50像素,【次】为5次。设置完毕,单击【确定】按钮完成操作。

    第5步,在【行为】面板中可以看到新增加的行为,单击左侧的onClick,从弹出的下拉菜单中选择onMouseOver,即设计当鼠标经过正文区域时,将触发弹跳特效。

    第6步,继续模仿第3、4、5步操作,再添加一个Bounce特效,设置【目标元素】为“<当前选定内容>”,【效果持续时间】为1000ms,即一秒钟;设置【可见性】为show,即效果结束后显示元素;设置【方向】为up,即定义目标对象向上弹跳,定义【距离】为50像素,【次】为5次,设置如图7.56所示。设置完毕,单击【确定】按钮完成操作。

    第7步,在【行为】面板中修改事件类型,单击左侧的onClick,从弹出的下拉菜单中选择on-MouseOver,即设计当鼠标经过时,将触发弹跳特效,然后单击向下箭头按钮,把当前行为移到下面,让该行为在上一步定义的行为之后发生。

    第8步,按Ctrl+S快捷键保存页面,此时Dreamweaver会弹出对话框,提示保存两个插件文件。单击【确定】按钮,保存jquery-1.8.3.min.js和jquery-ui-effects.cus-tom.min.js两个库文件。

    第9步,在浏览器中预览,当鼠标移到摘要正文上时,文字会高亮显示并逐步隐藏,然后再恢复正常显示。

    提示:Dreamweaver在制作网页时定制的jQuery高亮特效,实际上与jQuery原生的高亮特效所产生的效果是不同的,Dreamweaver强化了高亮显示后显示或隐藏对象,而不是保持对象默认的显示状态。因此,Dreamweaver的高亮特效适合设计渐隐、渐显特效。如果希望使用Dreamweaver的Highlight特效设计高亮显示,必须使用两个Highlight行为叠加设计,方法如本节示例。


    当前文章标题:在网页设计中制作弹跳的小球

    当前URL:http://www.0737dz.com/news/wzzz/3127.html

    上一篇:制作高亮显示文本

    下一篇:在网页设计中制作选项卡

    网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
    日本三级香港三级人妇99,亚洲欧美中文日韩综合图区,欧美黄网站色视频免费,哈啊往里噗嗤好深bl纯肉np 网站地图