博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery中animate的应用(图片自动移动)
阅读量:7199 次
发布时间:2019-06-29

本文共 941 字,大约阅读时间需要 3 分钟。

图片按照数字的顺序移动

<head>

    <title></title>
    <style type="text/css">
    img
    {
        position:absolute;
        top:13px;
        left:13px;
        width:100px;
        height:100px;
        }
        td
        {
            width: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>

转载于:https://www.cnblogs.com/duanlinlin/archive/2013/05/07/3065159.html

你可能感兴趣的文章
Java调用带有输入参数为Blob类型的存储过程
查看>>
rar
查看>>
/proc/sys/net/ipv4 详解1
查看>>
List集合去除重复元素,不打乱顺序(数组转List)
查看>>
vs code 使用 typings 对nodejs 代码进行提示
查看>>
我的友情链接
查看>>
没想到我也有了博客
查看>>
交换机以太通道的配置
查看>>
yum.conf配置详解
查看>>
Yii2的log分析
查看>>
再次过了软考网工
查看>>
PHP的$_SERVER数组字段详解
查看>>
tomcat 管理界面无法登陆
查看>>
胜者树与败者树
查看>>
java中的常量定义
查看>>
Linux中目录操作命令
查看>>
Linux下的touch命令及时间戳
查看>>
安装如Epson LQ-300K等老式打印机方法和心得
查看>>
菜鸟的第一次编程感受
查看>>
对代码命名的一点思考和理解
查看>>