九宫格转动效果

编程有钱人了 2014-04-24 04:01:55

如图效果：当点击中间开始按钮的时候，从左上角第一个开始变成红色，然后第二个，一次类推
第一张

第二张

我能实现匀速变换效果，怎么实现减速运动呢？然后停留在某个格子上呢？
能用JQUERY实现最好了！！！

...全文

334 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

编程有钱人了 2014-04-25

打赏
举报

引用 5 楼 liuxingfffff 的回复:

参考代码


<html>
<head>
    <style type="text/css">
        ul
        {
            list-style: none;
        }
        li
        {
            float: left;
            margin-right: 10px;
            min-height: 120px;
            min-width: 130px;
        }
        li img
        {
            margin: 1px;
        }
        
        li.selected img
        {
            border: 1px red solid;
        }
        li.last
        {
            float: none;
        }
    </style>
</head>
<body>
    <ul>
        <li data-index="0">
            <img src="gift.png" /></li>
        <li data-index="1">
            <img src="gift.png" /></li>
        <li data-index="2" class="last">
            <img src="gift.png" /></li>
        <li data-index="7">
            <img src="gift.png" /></li>
        <li>
            <img src="gift.png" /></li>
        <li data-index="3" class="last">
            <img src="gift.png" /></li>
        <li data-index="6">
            <img src="gift.png" /></li>
        <li data-index="5">
            <img src="gift.png" /></li>
        <li data-index="4" class="last">
            <img src="gift.png" /></li>
    </ul>
    <div>
        <span></span>
        <label></label>
    </div>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">

        var index = 0;
        var times = 100;
        var intervale_time = 25;
        var intervale = setInterval("move1()", intervale_time);

        function move() {
            $(".selected").removeClass("selected");
            $("li[data-index='" + index + "']").addClass("selected");
            index = index + 1;
            index = index % 8;
        }

        function move1() {
            if (times == 0) {
                clearInterval(intervale);
                times = 1;
                Move2();
            } else {
                times = times - 1;
                move();
                $("span").html("下次执行时间" + intervale_time + "毫秒");
                $("label").html("剩余次数" + times);
            }
        }

        function Move2() {
            times = times + 1;
            var time = intervale_time * times;
            if (time < 450) {
                move();
                $("span").html("下次执行时间" + time + "毫秒");
                setTimeout("Move2()", time);
            } else {
                alert(index);
            }
        }
    </script>
</body>
</html>

思路很好，谢谢了！

liuxingfffff 2014-04-24

打赏
举报

参考代码


<html>
<head>
    <style type="text/css">
        ul
        {
            list-style: none;
        }
        li
        {
            float: left;
            margin-right: 10px;
            min-height: 120px;
            min-width: 130px;
        }
        li img
        {
            margin: 1px;
        }
        
        li.selected img
        {
            border: 1px red solid;
        }
        li.last
        {
            float: none;
        }
    </style>
</head>
<body>
    <ul>
        <li data-index="0">
            <img src="gift.png" /></li>
        <li data-index="1">
            <img src="gift.png" /></li>
        <li data-index="2" class="last">
            <img src="gift.png" /></li>
        <li data-index="7">
            <img src="gift.png" /></li>
        <li>
            <img src="gift.png" /></li>
        <li data-index="3" class="last">
            <img src="gift.png" /></li>
        <li data-index="6">
            <img src="gift.png" /></li>
        <li data-index="5">
            <img src="gift.png" /></li>
        <li data-index="4" class="last">
            <img src="gift.png" /></li>
    </ul>
    <div>
        <span></span>
        <label></label>
    </div>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">

        var index = 0;
        var times = 100;
        var intervale_time = 25;
        var intervale = setInterval("move1()", intervale_time);

        function move() {
            $(".selected").removeClass("selected");
            $("li[data-index='" + index + "']").addClass("selected");
            index = index + 1;
            index = index % 8;
        }

        function move1() {
            if (times == 0) {
                clearInterval(intervale);
                times = 1;
                Move2();
            } else {
                times = times - 1;
                move();
                $("span").html("下次执行时间" + intervale_time + "毫秒");
                $("label").html("剩余次数" + times);
            }
        }

        function Move2() {
            times = times + 1;
            var time = intervale_time * times;
            if (time < 450) {
                move();
                $("span").html("下次执行时间" + time + "毫秒");
                setTimeout("Move2()", time);
            } else {
                alert(index);
            }
        }
    </script>
</body>
</html>