zoukankan      html  css  js  c++  java
  • 【Javascript】javascript学习 三十三 JavaScript 动画

    我们可以使用 JavaScript 来创建动态的图像。

    实例

    按钮动画
    利用两个不同的事件来驱动两个相应的函数,来切换两张对应的图片以创造出动画效果。

    JavaScript 动画

    使用 JavaScript 创建动态图像是可行的。

    窍门是:使用 JavaScript 通过不同的事件来切换不同的图像。

    在下面的例子中,我们要制作一个充当链接按钮的图像。我们将使用 onMouseOver 事件和 onMouseOut 事件来驱动 JavaScript 函数切换图像。

    HTML 代码

    这是 HTML 代码:

    <a href="http://www.w3school.com.cn" target="_blank">
    <img border="0" alt="Visit W3School!"
    src="/i/eg_mouse2.jpg" name="b1"
    onmouseOver="mouseOver()"
    onmouseOut="mouseOut()" />
    </a>

    注意:我们已为图像添加了 name 属性,这样 JavaScript 就能找到它了。

    onMouseOver 事件的作用是告知浏览器:一旦鼠标悬浮于图像之上,浏览器就会执行某个函数,这个函数会把这副图像替换为另一幅。

    onMouseOut 事件的作用是告知浏览器:一旦鼠标离开图像,浏览器就要执行另一个函数,这个函数会重新插入原来的那幅图像。

    JavaScript 代码

    通过下面的代码来切换图像:

    <script type="text/javascript">
    function mouseOver()
    {
    document.b1.src ="/i/eg_mouse.jpg"
    }
    function mouseOut()
    {
    document.b1.src ="/i/eg_mouse2.jpg"
    }
    </script>

    函数 mouseOver() 将图像切换为 "eg_mouse.jpg"。

    函数 mouseOut() 将图像切换为 "eg_mouse2.jpg"。

    完整的代码:

    <html>
    <head>
    <script type="text/javascript">
    function mouseOver()
      {
      document.b1.src ="/i/eg_mouse.jpg"
      }
    function mouseOut()
      {
      document.b1.src ="/i/eg_mouse2.jpg"
      }
    </script>
    </head>
    
    <body>
    <a href="http://www.w3school.com.cn" target="_blank">
    <img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1"
    onmouseOver="mouseOver()"
    onmouseOut="mouseOut()" />
    </a>
    </body>
    </html>
  • 相关阅读:
    Opencv在mac系统的安装与试用
    VINS 估计器之检查视差
    C语言——第零次作业
    C语言博客05指针
    循环结构
    C语言博客作业数组
    函数3
    C博客作业01分支、顺序结构
    group by的查询
    layui多张图片上传最多9张(新增和修改时的显示问题)
  • 原文地址:https://www.cnblogs.com/cuishao1985/p/1534405.html
Copyright © 2011-2022 走看看