0

私は完全なばかのように感じます。このスクリプトを機能させるのに約 4 時間を費やしました。

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>

<a href=""><img src="http://cdn1.iconfinder.com/data/icons/humano2/16x16/emblems/emblem-cd.png" id="image"><span id="spin">Spin</span></a>




   $("#spin").rotate({
    bind: {
        mouseover: function () {
            $("#image").rotate({
                animateTo: 180
            })
        },
        mouseout: function () {
            $("#image").rotate({
                animateTo: 0
            })
        }
    }

});

http://jsfiddle.net/8LV3p/3673/

私の人生では、自分のウェブサイトでそれを使用する方法がわかりません。やり方を調べてみたのですが、JavaScriptもJQueryも知らないので何を探せばいいのかわかりません。助けてください！

4

4 に答える 4

1

さて、これを.htmlファイルに含めたいと思うでしょう。おそらく<body>タグの間にあります（最初にロードされるようにjQueryRotate.jsスクリプトをタグに入れたいと思うかもしれません<head>）：

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>

<a href=""><img src="http://cdn1.iconfinder.com/data/icons/humano2/16x16/emblems/emblem-cd.png" id="image"><span id="spin">Spin</span></a>

<script type="text/javascript">
  $("#spin").rotate({
    bind: {
     mouseover: function () {
      $("#image").rotate({
            animateTo: 180
      })
    },
    mouseout: function () {
      $("#image").rotate({
              animateTo: 0
      })
    }
  }

});
</script>

HTMLドキュメントの<script type="text/javascript">タグは、JavaScriptとして内部で何かを実行するようにブラウザに指示します。

これはあなたが求めていたものですか？

于 2013-03-14T16:44:46.647 に答える
1

Jquery へのリンクを忘れている可能性はありますか?

   <script src="http://code.jquery.com/jquery-latest.js"></script>

全ページ：

<!DOCTYPE html>
<html>
<head>
<title>My page</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<script>
$(document).ready(function(){
$("#image").rotate({
    bind: {
        mouseover: function () {
            $(this).rotate({
                animateTo: 360
            })
        },
        mouseout: function () {
            $(this).rotate({
                animateTo: 0
            })
        }
    }

});



$("#spin").rotate({
    bind: {
        mouseover: function () {
            $("#image").rotate({
                animateTo: 360
            })
        },
        mouseout: function () {
            $("#image").rotate({
                animateTo: 0
            })
        }
    }

});
});
</script>
</head>
<body>
<style>
#image {
    margin-bottom:-5px;
}
a {
    color:red;
}
#spin {
    margin-left:10px;
}
</style>

<a href=""><img src="http://cdn1.iconfinder.com/data/icons/humano2/16x16/emblems/emblem-cd.png" id="image"><span id="spin">asdfasdfasdgt</span></a>
</body>    
</html>
于 2013-03-14T16:45:18.877 に答える
1

コードを組み合わせた実際の例は次のとおりです。

    <!DOCTYPE html ">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>

<style>
#image {
    margin-bottom:-5px;
}
a {
    color:red;
}
#spin {
    margin-left:10px;
}
</style>
</head>

<body>
<a href=""><img src="http://cdn1.iconfinder.com/data/icons/humano2/16x16/emblems/emblem-cd.png" id="image"><span id="spin">asdfasdfasdgt</span></a>
</body>
<script>
$(document).ready(function() {
$("#image").rotate({
    bind: {
        mouseover: function () {
            $(this).rotate({
                animateTo: 360
            })
        },
        mouseout: function () {
            $(this).rotate({
                animateTo: 0
            })
        }
    }
});

$("#spin").rotate({
    bind: {
        mouseover: function () {
            $("#image").rotate({
                animateTo: 360
            })
        },
        mouseout: function () {
            $("#image").rotate({
                animateTo: 0
            })
        }
    }

});
});
</script>
</html>

.html ファイルに保存します。回転するのを見てください。:)

この場合、JavaScript をドキュメント対応関数でラップすることをお勧めします。

$(document).ready(function() {
    //Your javascript codes here.
});

jquery プラグインの場合、常にスクリプトに jQuery を含める必要があります。

<script src="http://code.jquery.com/jquery-latest.js"></script>
于 2013-03-14T16:57:53.480 に答える
0

これをヘッダーに入れると、DOM が初期化されるのを待っていない可能性があります。それを

$(function() { // Short for $(document).ready(function() {
    $("#image").rotate({
        bind: {
            mouseover: function () {
                $(this).rotate({
                animateTo: 360
                })
            },
            mouseout: function () {
                $(this).rotate({
                    animateTo: 0
                })
            }
        }

    });

    $("#spin").rotate({
        bind: {
            mouseover: function () {
                $("#image").rotate({
                    animateTo: 360
                })
            },
            mouseout: function () {
                $("#image").rotate({
                   animateTo: 0
                })
            }
        }

    });
});
于 2013-03-14T16:52:25.277 に答える