div懸浮提示框

var tip = {
        $ : function(ele) {
            if (typeof (ele) == "object")
                return ele;
            else if (typeof (ele) == "string" || typeof (ele) == "number")
                return document.getElementById(ele.toString());
            return null;
        },
        mousePos : function(e) {
            var x, y;
            var e = e || window.event;
            return {
                x :e.clientX + document.body.scrollLeft
                        + document.documentElement.scrollLeft,
                y :e.clientY + document.body.scrollTop
                        + document.documentElement.scrollTop
            };
        },
        start : function(obj) {
            var self = this;
            //var t = self.$("showImgDiv");
            //var t = $("#showImgDiv");
            var t = $("#"+obj.getAttribute("imgDivObj"));
            obj.onmousemove = function(e) {
            /*
                var mouse = self.mousePos(e);
                t.style.left = mouse.x + 10 + 'px';
                t.style.top = mouse.y + 10 + 'px';
                var imgSrc = obj.getAttribute("imgSrc");
                var imgWidth = obj.getAttribute("imgWidth");
                t.innerHTML = "<img width="+imgWidth+" src='"+imgSrc+"'></img>";
                t.style.display = '';
            */
                var mouse = self.mousePos(e);
                var x = mouse.x;
                var y = mouse.y;
                t.css("left",x-210);
                  t.css("top",y-110);
                  t.css("z-index",100);
                var imgSrc = obj.getAttribute("imgSrc");
                var imgWidth = obj.getAttribute("imgWidth");
                t.html("<img width="+imgWidth+" src='"+imgSrc+"'></img>");
                //alert("a-->"+x+"   y-->"+y+"   "+t.html());
                t.show();
            }
            obj.onmouseout = function() {
                //t.style.display = 'none';
                t.hide();
            }
        }
    }


<td align="left" οnmοuseοver="tip.start(this)" imgDivObj="imgDiv3" imgWidth="300" imgSrc="${indexConfig.img01 }">
        ${indexConfig.img01 }
</td>


<div id="imgDiv3" style="position: absolute; left: 0; top: 0; display: none;"></div>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章