自己写了一个提示功能。页面有一个列表,然后鼠标移上去的时候通过ajax获取列表项的详细信息。。做法是:
鼠标移到列表项上,计算该标签的位置——var offset = $(this).offset();然后动态构建一个div插入该项下面,设置改div的位置即可。tip = $("<div></div>").attr("class", "rel");
tip.addClass("tip").css({ "top": (offset.top + 20), "left": (offset.left + 10) });现在的问题是,页面加载完成后,提示框显示的位置是正确的,但如果在页面加载完成后,拖动滚动条,提示框显示的位置就不正确了。js代码如下:        var tip = null;
        $("ul li a[rel=tooltip]").mouseover(function () {
            var offset = $(this).offset();
            tip = $("<div></div>").attr("class", "rel");            if ($(this).next("div").hasClass("rel")) {
                $(this).next("div.rel").show();
            } else {                tip.addClass("tip").css({ "top": (offset.top + 20), "left": (offset.left + 10) });                var proName = $(this).children("span[name=proName]").text(); //流程名
                var incident = $(this).children("span[name=incident]").text(); //实例号                $.ajax({
                    type: "get",
                    url: "Ajax/GetProjectDetail.aspx",
                    cache: false,
                    data: { proName: encodeURIComponent(proName), incident: incident },
                    success: function (msg) {
                        if (msg.toString() == "") {
                            tip.html("未查询到相关数据!");
                        } else {
                            tip.html(msg);
                        }
                    },
                    beforeSend: function () {
                        tip.html("数据载入中...");
                    },
                    error: function (res) {
                        tip.html("数据载入错误!");
                    },
                    afterSend: function (res) {
                        //tip.html("");
                    }
                });
                $(this).after(tip);
            }
        });        $("ul li a[rel=tooltip]").mouseout(function () {
            if ($(this).next("div").hasClass("rel")) {
                $(this).next("div").hide();
            }
        });

解决方案 »

  1.   

    <script type="text/javascript">
        var tip = null;
        $("ul li a[rel=tooltip]").hover(function () {
            var offset = $(this).offset();
            if ($(this).next("div").hasClass("rel")) {
                //$(this).next("div.rel").show();
                tip=$(this).next("div.rel");//先获取并不显示
            } else {
                tip = $("<div>数据载入中...</div>").attr("class", "rel");
                var proName = $(this).children("span[name=proName]").text(); //流程名
                var incident = $(this).children("span[name=incident]").text(); //实例号
                $.ajax({
                    type: "get",
                    url: "Ajax/GetProjectDetail.aspx",
                    cache: false,
                    data: { proName: encodeURIComponent(proName), incident: incident },
                    success: function (msg) {
                        if (msg.toString() == "") {
                            tip.html("未查询到相关数据!");
                        } else {
                            tip.html(msg);
                        }
                    },
                    error: function (res) {
                        tip.html("数据载入错误!");
                    },
                    afterSend: function (res) {
                        //tip.html("");
                    }
                });
                $(this).after(tip);
            }
            tip.addClass("tip").css({ display:"block",top: (offset.top + 20), left: (offset.left + 10) });//关键问题在这
        },function(){
            $(this).next("div").hide();
        });
    </script>
      

  2.   

    原因是网页可能含有其他ajax使得网页在变化大小。如果事先已经生成的提示位置没有重新定位当然就会错位。所以做法就是每次显示前都重新定位!
      

  3.   


    嗯,谢谢。等下我试试。。我的做法是先判断制定位置是否已经存在了对应提示框(不希望每次都ajax去获取),如果没有则动态添加提示框div,然后向div里面填充ajax返回的信息关键有两点:
    第一:在chrome下是正常的,在ie8(win2003)下不正常。
    第二:如果在完成加载页面后,第一时间将鼠标移到每项上面提示就正常的,即使这个时候拖动滚动条;反过来,如果在完成加载后,第一时间拖动滚动条,然后移到每项上面,这个时候,提示框的位置就会错乱了
      

  4.   


    还是不行,如果在拖动滚动条和执行hover的顺序时还是会有错误。。现在提示div都不知道提示道什么地方去了。 win2003 的 ie8还是不行。chrome一直是好的
      

  5.   

    “不希望每次都ajax去获取”这点我当然考虑到了。
    你的css是怎么写的? .rel{?} 或者你把完整的html+css给出来测试一下。还有ie8有兼容与标准模式,你都测试一下。
      

  6.   


    好的,明天我贴出来给你看看。。我记得rel样式里面只写了宽、高、行高、背景色、字体颜色等
      

  7.   

    *如果你不把mouseover,mouseout替换成 mouseenter,mouseleave后边还会有奇怪的错误,
    *设置 left,top 应该是要加 'px','em'之类的参数吧??
    *没有用到"队列",或者你在mouseenter时,移除mouseenter事件绑定,等 mouseleave时再绑上
      

  8.   


    rel没有写样式。。
    主要是为了方便js操作谢谢!
      

  9.   


    不好意思,忘记了,找到样式了。。
    .tip
    {
        width:200px;    
        position:absolute;
        z-index:1000;         
        background: #C0C0C0;
        border: 10px solid white;
        color: white;
        padding: 3px;
        width: 250px; /*width of tooltip*/
        line-height:150%;
    }.rel
    {
        height:auto;
    }
      

  10.   

    <style type="text/css">
        .tip{
            width:200px;
            position:absolute;
            z-index:1000;
            background: #C0C0C0;
            border: 10px solid white;
            color: white;
            padding: 3px;
            width: 250px; /*width of tooltip*/
            line-height:150%;
        }
    </style>
    <div onclick="change(this)">点击这里切换高度</div>
    <ul>
        <li><a href="#" rel="tooltip">鼠标经过这里提示</a></li>
    </ul>
    <script type="text/javascript">
        function change(obj){
            $(obj).height(parseInt(200*Math.random()));
        }    var tip = null;
        $("ul li a[rel=tooltip]").hover(function () {
            var offset = $(this).offset();
            if ($(this).next("div").hasClass("tip")) {
                //$(this).next("div.rel").show();
                tip=$(this).next("div.tip");//先获取并不显示
            } else {
                tip = $("<div class='tip'>数据载入中...</div>");
                var proName = $(this).children("span[name=proName]").text(); //流程名
                var incident = $(this).children("span[name=incident]").text(); //实例号
                /*
                $.ajax({
                    type: "get",
                    url: "Ajax/GetProjectDetail.aspx",
                    cache: false,
                    data: { proName: encodeURIComponent(proName), incident: incident },
                    success: function (msg) {
                        if (msg.toString() == "") {
                            tip.html("未查询到相关数据!");
                        } else {
                            tip.html(msg);
                        }
                    },
                    error: function (res) {
                        tip.html("数据载入错误!");
                    },
                    afterSend: function (res) {
                        //tip.html("");
                    }
                });
                */
                $(this).after(tip);
            }
            tip.css({ display:"block",top: (offset.top + 20), left: (offset.left + 10) });//关键问题在这
        },function(){
            $(this).next("div").hide();
        });
    </script>通过firefox,ie8测试并没发现什么问题。当然我这里是禁用了ajax测试。你的数据从ajax加载后,记得返回值最好是过滤了html的,否则容易破坏标签结构。
      

  11.   


    问题确认了因为在win2003 的ie8下,当向下拉动滚动条时,列表项的$(this).offset().top;始终为0,所以解决方法:                if ($.browser.msie) {
                        tip.addClass("tip").css({ "top": (offset.top + 20 + yScroll), "left": (offset.left + 30) });
                    } else {
                        tip.addClass("tip").css({ "top": (offset.top + 20), "left": (offset.left + 30) });
                    }    var yScroll = 0;
        $(window).scroll(function getPageScroll() {
            if (self.pageYOffset) {
                yScroll = self.pageYOffset;
                //xScroll = self.pageXOffset; 
            } else if (document.documentElement && document.documentElement.scrollTop) {
                yScroll = document.documentElement.scrollTop;
            } else if (document.body) {
                yScroll = document.body.scrollTop;
            }
            //arrayPageScroll = new Array('',yScroll)        
            return yScroll;
        });