0

我觉得自己像个彻头彻尾的白痴。我花了大约四个小时制作这个脚本：

<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 回答