车速表图形帮助w / jQuery和CSS3-Java 学习之路

我正在研究一个项目，为了学习CSS3 / jQuery动画而烦恼和傻笑 . 我有10个图标和一个速度计图形 . 在页面加载时，速度表图形旋转到'-60deg'，当鼠标移动时，速度表图形移动到硬编码的' - '到''角度 .

HTML：

<nav class="clearfix" id="nav">
        <ul>
            <li><a class="icon first" data-value="1"></a></li>
            <li><a class="icon second" data-value="2"></a></li>
            <li><a class="icon third" data-value="3"></a></li>
            <li><a class="icon forth" data-value="4"></a></li>
            <li><a class="icon fifth" data-value="5"></a></li>
            <li><a class="icon sixth" data-value="6"></a></li>
            <li><a class="icon seventh" data-value="7"></a></li>
            <li><a class="icon eight" data-value="8"></a></li>
            <li><a class="icon nine" data-value="9"></a></li>
            <li><a class="icon ten" data-value="10"></a></li>
        </ul>
    </nav>
<div id="footer-container">
    <div id="speedometer"></div>
</div>

JAVASCRIPT：

$(function()
{
    $(".icon").hover(function()
    {
        var ICON_NAME = $(this).attr("data-value");
        switch(ICON_NAME)
        {
            case '1':
                $("#speedometer").stop(true, true).animate({roate: '-60deg'});
                break;
            case '2':
                $("#speedometer").stop(true, true).animate({rotate: '-60deg'});
                break;
            case '3':
                $("#speedometer").stop(true, true).animate({rotate: '-40deg'});
                break;              
            case '4':
                $("#speedometer").stop(true, true).animate({rotate: '-30deg'});
                break;              
            case '5':
                $("#speedometer").stop(true, true).animate({rotate: '-20deg'});
                break;              
            case '6':
                $("#speedometer").stop(true, true).animate({rotate: '0deg'});
                break;      
            case '7':
                $("#speedometer").stop(true, true).animate({rotate: '30deg'});
                break;
            case '8':
                $("#speedometer").stop(true, true).animate({rotate: '40deg'});
                break;
            case '9':
                $("#speedometer").stop(true, true).animate({rotate: '50deg'});
                break;                                                                  
            case '10':
                $("#speedometer").stop(true, true).animate({rotate: '60deg'});
                break;
        }
    });
})();

所以这很酷 - 但我有两个问题：1 . ）它似乎没有检测到第一个图标（只有2到10）和2.）一旦我在页面加载后第一次将鼠标移到图标上，它反弹到'0deg'位置然后到当前位置 . 我该如何解决这两个问题呢？在动画到当前位置之前跳到0deg是我最大的问题 .

注意通过CSS3变换将车速表的初始位置设置为“-60deg” .

链接到现场示例：Speedometer Example

1 回答

干得好！只需填写 data 属性，就可以使这样的简单交互变得更加清晰 .

<nav class="clearfix" id="nav">
    <ul>
        <li><a class="icon first" data-value="-60deg"></a></li>
        <li><a class="icon second" data-value="-40deg"></a></li>
        ...
    </ul>
</nav>

<script>
$(function(){
  $(".icon").hover(function(){
    var degs = $(this).attr("data-value");
    $("#speedometer").stop(true, true).animate({rotate: degs});
  });
});
</script>

回复于 2024-04-28T08:38:05+08:00

车速表图形帮助w / jQuery和CSS3

1 回答

相关问题