将 tweenMax 导入 javascript

Question

我正在尝试将 TweenMax 导入我的 html，但我找不到我做错了什么......我已经完成了他们网站上所说的一切。

<!DOCTYPE html>
<html>
<head lang="en">
    <link rel="stylesheet" href="css/PaginaFinal.css">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
    <meta charset="UTF-8">
    <title></title>
</head>

我在这里进行初始化；

<body onload="init()" onclick="pointerDefault(event)">

    <input type="text" id="search" name="procurarPalavra" onkeypress="premirEnter(event)">
    <img src="search.png" alt="Smiley face" id="ok" onclick="enviarPalavra(event)" >
    <img src="info.png" id="help">

<footer id="myFooter">

</footer>

脚本在这里

    function init() {
        var search = document.getElementById("ok");
        var text = document.getElementById("search");
        var help = document.getElementById("help");
        search.hover(function () {
            TweenMax.to(this, .35, {width: "80", height: "80"})
        }, function () {
            TweenMax.to(this, .5, {width: "50", height: "50"})
        })

        text.hover(function () {
            TweenMax.to(this, .35, {width: "80", height: "80"})
        }, function () {
            TweenMax.to(this, .5, {width: "50", height: "50"})
        })

        help.hover(function () {
            TweenMax.to(this, .35, {width: "100", height: "100"})
        }, function () {
            TweenMax.to(this, .5, {width: "70", height: "70"})
        })   
    }
</script>
</body>
</html>

Answer 1

在我看来，您希望 jQuery 中的 .hover() 在这里工作，但我没有看到任何 jQuery 导入。我可能是错的。

加载 jQuery 后，您可以将 search 和其他变量包装到 jQuery 对象中，例如$(search) 或者您可以使用 jQuery 将它们放在首位，例如var search = $('#ok'); 而不是 var search = document.getElementById('ok');.

或者，如果您想避免 jQuery，您可以使用 addEventListener 方法收听 mouseover 和 mouseout 事件。

将 tweenMax 导入 javascript

Importing tweenMax into javascript

javascript

animation

gsap