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>

  • 相关阅读:
    ExtJs多级联动菜单的一种实现
    初学jquery之自学笔记(2)
    微软MVP评Silverlight的功能特性和价值
    利用XMLFormView在Web部件页中或者自定义页面中嵌入Infopath表单
    初学jquery之自学笔记(3)
    我想大声告诉你
    HTC G7 金卡 制作
    黑苹果配置
    我的Android 从 2.3开始! 开发环境搭建
    新台式机配置表
  • 原文地址:https://www.cnblogs.com/duanlinlin/p/3065159.html
Copyright © 2011-2022 走看看