<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

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

          • 2019-11-15 15:28:49
          • 阅读次数:
          • 作者:盈岚科技小编
          • 来源:http://www.1c4w.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.1c4w.com/news/wzzz/3127.html

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

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

          网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
          鸭子tv国产在线永久播放,天天夜日日日日碰日日摸日日澡,日本特黄特黄刺激大片,老熟妇乱子伦456在线观看 网站地图