0

次のコードを手伝ってください。画像を使用して円形メニューを作成し、簡単にすることはできますが、CSSとJqueryを使用してページを超高速にし、このプロジェクトから何かを学びたいと思っています。私がやりたいのは、ホバーしたメニュー項目の周りにある円形の色を変更（アニメーション化）することです。コードは非常に自明だと思いますが、不明な点がある場合はお知らせください。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.color.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
        var itemnumber = '';
        $('#menu li').hover(function () {
            itemnumber = '#item' + $(this).text();
            $(itemnumber).animate({color: "#abcdef"}, 1000);

        }).mouseleave(function () {
            $(itemnumber).animate({color: "#B1AC8F"}, 1000);
        });
        }); 
</script>
<style type="text/css">
    body {
        width: 810px;
        height: 800px;
        background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.34, rgb(206,203,183)),color-stop(0.82, rgb(177,172,143)));
    }

    #menu ul { list-style:none; }
    #logo { width:250px; margin:0 285px; }
    .circle { width: 150px; height: 150px; background: transparent; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; border:10px; border-style:solid; color:#B8A36E; }
    .oval { margin: 0.5px 10px; width: 130px; height: 50px; background: #B8A36E; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }
    #itempic {position:relative; margin: -1px -12px; z-index:-1;}
    #item1 {position:absolute; left: 160px; top:170px; }
    #item2 {position:absolute; left: 335px; top:170px; }
    #item3 {position:absolute; left: 510px; top:170px; }
    #item4 {position:absolute; left: 245px; top:325px; }
    #item5 {position:absolute; left: 420px; top:325px; }
    #item6 {position:absolute; left: 160px; top:480px; }
    #item7 {position:absolute; left: 335px; top:480px; }
    #item8 {position:absolute; left: 510px; top:480px; }
    #item9 {position:absolute; left: 245px; top:635px; }
    #item10 {position:absolute; left: 420px; top:635px; }
</style>
</head>

<body>
<img id="logo" src="logo.png">
<div id="menu">
<ul>
    <li><div class="circle" id="item1"><div class="oval"><img id="itempic" src="Item1.png"></div></div></li>
    <li><div class="circle" id="item2"><div class="oval"><img id="itempic" src="Item2.png"></div></div></li>
    <li><div class="circle" id="item3"><div class="oval"><img id="itempic" src="Item3.png"></div></div></li>
    <li><div class="circle" id="item4"><div class="oval"><img id="itempic" src="Item4.png"></div></div></li>
    <li><div class="circle" id="item5"><div class="oval"><img id="itempic" src="Item5.png"></div></div></li>
    <li><div class="circle" id="item6"><div class="oval"><img id="itempic" src="Item1.png"></div></div></li>
    <li><div class="circle" id="item7"><div class="oval"><img id="itempic" src="Item2.png"></div></div></li>
    <li><div class="circle" id="item8"><div class="oval"><img id="itempic" src="Item3.png"></div></div></li>
    <li><div class="circle" id="item9"><div class="oval"><img id="itempic" src="Item4.png"></div></div></li>
    <li><div class="circle" id="item10"><div class="oval"><img id="itempic" src="Item5.png"></div></div></li>
</ul>
</div>
</body>
</html>

私は問題を見つけました..助けてくれてありがとう！

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.color.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
        var itemnumber = '';
        var itemoval = '';
        $('#menu li').hover(function () {
            itemnumber = '#item' + ($('#menu li').index(this) + 1);
            itemoval = itemnumber + '-oval';
            $(itemnumber).animate({color: "#F97780"}, 500);
            $(itemoval).animate({backgroundColor: "#F97780"}, 500);
        }).mouseleave(function () {
            $(itemnumber).animate({color: "#B8A36E"}, 500);
            $(itemoval).animate({backgroundColor: "#B8A36E"}, 500);
        });
        }); 
</script>
<style type="text/css">
    body {
        width: 810px;
        height: 800px;
        background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.34, rgb(206,203,183)),color-stop(0.82, rgb(177,172,143)));
    }

    #menu ul { list-style:none; }
    #logo { width:250px; margin:0 285px; }
    .circle { width: 150px; height: 150px; background: transparent; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; border:10px; border-style:solid; color:#B8A36E; }
    .oval { z-index:-1; margin: 0.5px 10px; width: 130px; height: 50px; background: #B8A36E; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }
    #itempic {position:relative; margin: -1px -12px; z-index:-1;}
    #item1 {position:absolute; left: 160px; top:170px; }
    #item2 {position:absolute; left: 335px; top:170px; }
    #item3 {position:absolute; left: 510px; top:170px; }
    #item4 {position:absolute; left: 245px; top:325px; }
    #item5 {position:absolute; left: 420px; top:325px; }
    #item6 {position:absolute; left: 160px; top:480px; }
    #item7 {position:absolute; left: 335px; top:480px; }
    #item8 {position:absolute; left: 510px; top:480px; }
    #item9 {position:absolute; left: 245px; top:635px; }
    #item10 {position:absolute; left: 420px; top:635px; }
</style>
</head>

<body>
<img id="logo" src="logo.png">
<div id="menu">
<ul>
    <li><div class="circle" id="item1"><div class="oval" id="item1-oval"><img id="itempic" src="Item1.png"></div></div></li>
    <li><div class="circle" id="item2"><div class="oval" id="item2-oval"><img id="itempic" src="Item2.png"></div></div></li>
    <li><div class="circle" id="item3"><div class="oval" id="item3-oval"><img id="itempic" src="Item3.png"></div></div></li>
    <li><div class="circle" id="item4"><div class="oval" id="item4-oval"><img id="itempic" src="Item4.png"></div></div></li>
    <li><div class="circle" id="item5"><div class="oval" id="item5-oval"><img id="itempic" src="Item5.png"></div></div></li>
    <li><div class="circle" id="item6"><div class="oval" id="item6-oval"><img id="itempic" src="Item1.png"></div></div></li>
    <li><div class="circle" id="item7"><div class="oval" id="item7-oval"><img id="itempic" src="Item2.png"></div></div></li>
    <li><div class="circle" id="item8"><div class="oval" id="item8-oval"><img id="itempic" src="Item3.png"></div></div></li>
    <li><div class="circle" id="item9"><div class="oval" id="item9-oval"><img id="itempic" src="Item4.png"></div></div></li>
    <li><div class="circle" id="item10"><div class="oval" id="item10-oval"><img id="itempic" src="Item5.png"></div></div></li>
</ul>
</div>
</body>
</html>
4

2 に答える 2

2

ここでjQueryUIColorアニメーションを確認する必要があります。

このスクリプトタグを含めることで、GoogleCDNを使用してjQueryUIを含めることができます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery-ui/1.8.21/jquery-ui.min.js"></script>

基本的には、jQuery UIをリンクしてから、ホバー関数を関数に変更することになりmouseenterます。

この作業例を確認してください。

于 2012-08-01T21:12:09.907 に答える
1

これを見てください：http：//jsfiddle.net/ufomammut66/ZsX8e/

ホバーイベントをmouseenterイベントに変更しました。jsfiddleでホバーに戻すと、「in」ロギングステートメントが途中で2回起動することに気付くでしょう（私が残したconsole.logステートメントを探してください）。これは望ましくありません。

また、jqueryセレクターをサークルクラスに変更しました。これを行ったのは、li要素（画像が不足している可能性があります）が表示されないため、円要素に入るときに起動したいように見えるためです。

itemnumberを何に使用しようとしているのかはわかりませんでしたが、サークル要素IDを再構築して選択しようとしているように見えました。this要素は、入力または終了する現在の要素を参照するため、これを行う必要はありません。

注：インポートとしてhttp://www.bitstorm.org/jquery/color-animation/を使用していると思います。jquery.color.min.jsjsFiddleには、これが機能するようにインポートされています。

お役に立てれば。

于 2012-08-01T21:12:49.157 に答える