Question

我有一个高度为240像素的div，其隐藏的溢出（css attr。）。当用户按下按钮时，div会向上滚动到之前隐藏的其他内容。当用户离开此div时，我希望它滚动回默认内容。但是，没有jQuery鼠标事件工作......有谁知道为什么？这是我的代码：

<div id="wrapper">
    <ul>     
        <li id="centerhover">
            <div class="welcomemsg">
                welcome info
            </div>

        <div class="share">
            <ul>
                <li>share 1</li>
                <li>share 2</li>
            </ul>
        </div> 
        </li>
        <li id="center">
            <div id="pull"></div>
        </li>   
    </ul>
</div>

显示的初始内容位于ID为“center”的列表项中。当用户按下id为“pull”的div时，应显示id为“centerhover”的列表项中的内容。这是它背后的Javascript：

$(document).ready(function() {
        $("#pull").click(function() {
            return gotoPage(0);
        });

        $("centerhover").click(function() {
            return gotoPage(1);
        });

        function gotoPage(page) {
            var visible = Math.ceil($("#wrapper").innerHeight() / 240);
            var currentpage = 1;
            if (page == 1) {
                currentpage = 0;
            }
            var dir = page < 1 ? -1 : 1;
            var n = Math.abs(currentpage - page);
            var top = 240 * dir * visible * n;
            $("#wrapper").filter(':not(:animated)').animate({
                scrollTop : '+=' + top}, 500, function() {
                    if (page == 1) {
                        $("#wrapper").scrollTop(240);
                    } else {
                        $("#wrapper").scrollTop(-240);
                    }
            });
            return false;
        }

        var center = document.getElementById("center");
        var wrapper = document.getElementById("wrapper");
        wrapper.scrollTop = center.scrollHeight;
        setTimeout(function() {
            T.preload(0);
            T.poll(0);
        }, 1000);
    });

任何人都有想法？我尝试过mouseout，点击和其他活动......谢谢！

Answer 1

首先只是指出你的脚本的一些变化，我没有看到尝试将“mouseleave”事件绑定到现有脚本，我将在下面的修改代码下面放置你想要做的事情（所有Flamers的注意事项：这是修复他的一些语法问题的20秒通过，我将在时间允许的情况下进行重构）

$(document).ready(function() {
        $("#pull").click(function() {
            return gotoPage(0);
        });

        $("#centerhover").click(function() {
            return gotoPage(1);
        });

        function gotoPage(page) {
            var visible = Math.ceil($("#wrapper").innerHeight() / 240);
            var currentpage = 1;
            if (page == 1) {
                currentpage = 0;
            }
            var dir = page < 1 ? -1 : 1;
            var n = Math.abs(currentpage - page);
            var top = 240 * dir * visible * n;
            $("#wrapper").filter(':not(:animated)').animate({
                scrollTop : '+=' + parseInt(top)}, 500, function() {
                    if (page == 1) {
                        $("#wrapper").scrollTop(240);
                    } else {
                        $("#wrapper").scrollTop(-240);
                    }
            });
            return false;
        }

        var center = $("#center");
        var wrapper = $("#wrapper");
        wrapper.scrollTop(center.scrollTop());
        setTimeout(function() {
            T.preload(0);
            T.poll(0);
        }, 1000);
    });

添加绑定以离开包装器元素：

$("#wrapper").bind("mouseleave", function(){
    $(this).scrollTop(0);
});

滚动列表后jQuery鼠标事件无法正常工作

1 个答案: