如何在页面加载时运行脚本？

Question

这个脚本从上到下画一条线，但是它从鼠标悬停“ onhover”开始，我希望它在打开页面时绘制。

这是完整的代码，很清楚。 使它起作用的唯一方法是将鼠标悬停在此行$( this ).hover(function() 。

var animationDuration = "0.4"
var backgroundColor = "white"

$.fn.line = function liner(animationDuration, borderWidth, side, backgroundColor) {
    var className = "line"
    var timePerSide = animationDuration

    $(this).append('<div class=' + className + '> <div></div> </div>');

    $(this).children("." + className).css({
        "-webkit-transition": "all " + timePerSide + "s linear " + timePerSide * 0 + "s",
        "transition": "all " + timePerSide + "s linear " + timePerSide * 0 + "s",
        "background-color": backgroundColor,
    });

    switch (true) {
        case side == "right":
            $(this).children(".line").css({
                "top": "0",
                "right": "-10",
                "height": "0%",
                "width": borderWidth,
            });
    }

    if (side == "right") {
        $(this).hover(function () {
            $(this).children(".line").css({
                "height": "150%",
            });
        });
    }
};

这是我的HTML

<body>
<div class="box1 float-left liner">
<h1>Lorem</h1>
</div>
</body>
<script type="text/javascript">
    $( document ).ready(function() {
        $('.liner').line(animationDuration, "5px", "right", backgroundColor);
    });
    </script>
</html>

Answer 1

听起来您想忽略悬停功能，而只是在加载时运行插件的一部分。 您必须修改插件，这可能不是一个主意。 代替这个：

if (side == "right") {
    $(this).hover(function () {
        $(this).children(".line").css({
            "height": "150%",
        });
    });
}

...只需这样做：

if (side == "right") {
    $(this).children(".line").css({
        "height": "150%",
    });
}

如果需要在两个事件上运行的代码，则可以将内部部分拉入一个命名函数，并为两个函数调用它：

function setLineHeight(els) {
    $(els).children(".line").css({
        "height": "150%",
    });     
}

... 接着：

if (side == "right") {
    $(this).hover(function () {
        setLineHeight(this);
    });

    setLineHeight(this); // called when the plugin is initialized (on document.ready)
}

如何在页面加载时运行脚本？

问题描述

1 个解决方案

解决方案1
0 2014-11-13 18:01:30

如何在页面加载时运行脚本？

问题描述

1 个解决方案

解决方案1 0 2014-11-13 18:01:30

解决方案1
0 2014-11-13 18:01:30