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>

  • 相关阅读:
    实验-继承&super.doc
    Python库
    Github高级搜索
    代码报错记录
    编程问题解决
    百科
    【Android】添加依赖包
    【Android】导航栏(加图片icon)和不同页面的实现(viewpager+tablayout)
    【Android】Android Studio真机调试的问题统整
    【AD】自己画板的备忘
  • 原文地址:https://www.cnblogs.com/duanlinlin/p/3065159.html
Copyright © 2011-2022 走看看