zoukankan      html  css  js  c++  java
  • jQuery中animate的应用(图片自动移动)

    图片按照数字的顺序移动

    <head>
        <title></title>
        <style type="text/css">
        img
        {
            position:absolute;
            top:13px;
            left:13px;
            100px;
            height:100px;
            }
            td
            {
                100px;
                height:100px;
                border:1px solid red;
                }
        </style>
        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $('img').click(function () {
                    $(this).animate({ left: '+=104px' }, 2000).animate({ left: '+=104px' }, 2000).animate({ top: '+=104px' }, 2000).animate({ left: '-=104px' }, 2000).animate({ left: '-=104px' }, 2000).animate({ top: '+=104px' }, 2000).animate({ left: '+=104px' }, 2000).animate({ left: '+=104px' }, 2000);
                })
            })
        </script>
    </head>
    <body>
        <table style="border:1px solid red;">
            <tr>
                <td><img alt="" src="images/1.jpg" />1</td><td>2</td><td>3</td>
            </tr>
            <tr>
                <td>6</td><td>5</td><td>4</td>
            </tr>
            <tr>
                <td>7</td><td>8</td><td>9</td>
            </tr>
        </table>
    </body>

  • 相关阅读:
    Eclipse 安装插件
    java 之 Spring 框架(Java之负基础实战)
    tomcat 修改网站路径(Java之负基础实战)
    tomcat 修改编码(Java之负基础实战)
    tomcat 修改端口(Java之负基础实战)
    linux vi 操作
    解压文件--linux
    smarty用法
    thinkphp调试手段
    kindeditor上传文件的使用
  • 原文地址:https://www.cnblogs.com/duanlinlin/p/3065159.html
Copyright © 2011-2022 走看看