Question

我觉得自己像一个完全白痴。我花了大约四个小时使这个脚本工作：

<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，我不知道要搜索什么。请帮忙！

Answer 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的形式执行任何内容。

这就是你问的问题吗？

Answer 2

您是否可能忘记链接到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>

Answer 3

合并代码的工作示例为：

    <!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>

Answer 4

如果你把它放在标题中，你可能不会等待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
                })
            }
        }

    });
});

旋转光盘的JQuery / JavaScript

4 个答案: