Question

我在这里发现了一个很好的滚动效果http://jsfiddle.net/7ZVb7/1383/ 我试图复制代码副本，但它无法正常工作。我是jQuery的新手，因此我不知道在哪里放置相应的文件请帮助纠正代码

<html>

<head>
<script>
$('#parent').bind('mousewheel', function (e) {
    if (!(e.originalEvent.wheelDelta == 120)) {
        var top = parseInt($("#child").css("top"));
        $("#child").css("top", (top - 100) + "px");
        top = parseInt($("#child").css("top"));
        if (top <= -500) {
            setTimeout(function () {
                $("#child").css("top", "-500px");
            }, 100);
        }
    } else {
        var top = parseInt($("#child").css("top"));

        $("#child").css("top", (top + 100) + "px");
        top = parseInt($("#child").css("top"));
        if (top >= 0) {
            setTimeout(function () {
                $("#child").css("top", "0");
            }, 100);
        }
    }
});
</script>

<style type="text/css">
    #parent {
    width: 300px;
    height: 300px;
    background-color: #aaa;
    margin: auto auto;
    overflow: hidden;
}
#child {
    width: 200px;
    height: 800px;
    background-color: #999;
    margin: auto auto;
    text-align: justify;
    position: relative;
    top: 0;
    -webkit-transition: all 0.5s ease-out;
}
</style>

<head>

<body>
    <script src="src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js""></script>
    <script>
$('#parent').bind('mousewheel', function (e) {
    if (!(e.originalEvent.wheelDelta == 120)) {
        var top = parseInt($("#child").css("top"));
        $("#child").css("top", (top - 100) + "px");
        top = parseInt($("#child").css("top"));
        if (top <= -500) {
            setTimeout(function () {
                $("#child").css("top", "-500px");
            }, 100);
        }
    } else {
        var top = parseInt($("#child").css("top"));

        $("#child").css("top", (top + 100) + "px");
        top = parseInt($("#child").css("top"));
        if (top >= 0) {
            setTimeout(function () {
                $("#child").css("top", "0");
            }, 100);
        }
    }
});
</script>
<div id="parent">
    <div id="child">aaa aaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaa</div>
</div>
</body>
</html>

Answer 1

尝试使用Animate功能

  $('#parent').bind('mousewheel', function (e) {
    if (!(e.originalEvent.wheelDelta == 120)) {
        var top = parseInt($("#child").css("top"));
        $("#child").css("top", (top - 100) + "px");
        top = parseInt($("#child").css("top"));
        if (top <= -500) {
            setTimeout(function () {
                $("#child").animate({top: "-500px"},1000);
            }, 100);
        }
    } else {
        var top = parseInt($("#child").css("top"));

        $("#child").css("top", (top + 100) + "px");
        top = parseInt($("#child").css("top"));
        if (top >= 0) {
            setTimeout(function () {
                 $("#child").animate({top: "0px"},1000);
            }, 100);
        }
    }
});

鼠标平滑滚动不起作用

1 个答案: