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>

  • 相关阅读:
    CF1391D 【505】
    CF1389C 【Good String】
    CF1364C 【Ehab and Prefix MEXs】
    CF1353E 【K-periodic Garland】
    CF1349A 【Orac and LCM】
    CF1352C 【K-th Not Divisible by n】
    CF413D 【2048】
    CF257B 【Playing Cubes】
    CF267A 【Subtractions】
    2018.8.16提高B组模拟考试
  • 原文地址:https://www.cnblogs.com/duanlinlin/p/3065159.html
Copyright © 2011-2022 走看看