弹出层设计

var dl_cosetimer = 0;

$(function() {
    $('.info-2').live('mouseover', function(e) {
        showDL(e);
    });
    
    $('.info-2').live('mouseout', function(e) {
        dl_timer(e);
    });
    
    /*
    $('.doubleLayer').live('mouseover', function(e) {
        // alert('1');
            dl_canceltimer();
            $('.doubleLayer').css('visibility', 'visible');
        });
     */
    /*
    $('.doubleLayer').live('mouseout', function(e) {
        // alert('1');
            dl_timer(e);
        });
 */
});

/**
 * 获取滚动的高度
 * @returns 返回向下滚动的高度
 */
function getScrollTop() {
    var scrollPos; 
    if (window.pageYOffset) {
        scrollPos = window.pageYOffset; 
    } else if (document.compatMode && document.compatMode != 'BackCompat') { 
        scrollPos = document.documentElement.scrollTop; 
    } else if (document.body) { 
        scrollPos = document.body.scrollTop; 
    } 
    return scrollPos; 
} 

/**
 *获取当前窗口的宽高 
 * 
 */
function getBrowserPosi(){
    return {height:$(window).height(),width:$(window).width()};
}

//获取鼠标坐标函数
function getMousePos (e) {
    return {left:e.pageX,top:e.pageY};
}

function showDL(e) {
    dl_canceltimer();
    var curOffset = $(e.target).offset();
    var lWidth = getElementMargin.left(e.target);
    createDoubleLayer($(".doubleLayer").data($(e.target).attr("AgriProductID")));
    
    //弹出层顶部的y坐标
    var top = 0;
    //弹出层三角凸起的y坐标
    var tuqi_top = 0;
    var tuqi_top_2 = 8080;    
    /*
     * 1.首先判断当前屏幕的可见区域的高度是否大于弹出层的高度
     * 2.当可见区域的高度小于弹出层的高度时，则让弹出层的顶部位于屏幕可见区域的顶部
     * 3.当可见区域大于弹出层的高度时，分为以下几种情况：
     * 3.1: 鼠标当前位置上下两部分的距离都大于弹出层的高度
     * 3.2：鼠标当前位置以下大于弹出层的高度
     * 3.3: 鼠标当前位置以上大于弹出层的高度
     * 3.4: 鼠标当前位置上下两部分的距离都不大于弹出层的高度（上下总和大于弹出层的高度）
     * 
     */
    var top_wyn;
    //当前鼠标的坐标
    var posi = getMousePos(e);
    
    //当前图片上边距距离浏览器可见区域顶部的距离(图片顶部的Y坐标 - 竖向滑轮滚动过的距离)
//    var distanceToBrowserTop = curOffset.top - getScrollTop();
    //当前图片上边距距离浏览器可见区域底部的距离(图片可见区域的宽度 - 当前图片上边距距离浏览器可见区域顶部的距离distanceToBrowserTop)
//    var distanceToBrowserBottom =  getBrowserPosi().height - distanceToBrowserTop;
    
    
    //弹出层的高度
    var doubleLayerHeight = $(".doubleLayer").height();
    
    //当可见区域的高度小于弹出层的高度时
    if(doubleLayerHeight >= getBrowserPosi().height){
        top_wyn = getScrollTop()+2;
    }else{
        /*当可见区域的高度大于弹出层的高度时*/
        
        //当前鼠标距离浏览器可见区域顶部的距离
        var cursorToTop = posi.top - getScrollTop();
        //当前鼠标距离浏览器可见区域底部的距离
        var cursorToBottom = getBrowserPosi().height - cursorToTop;
//        alert(cursorToTop + "--" + cursorToBottom + "--" + doubleLayerHeight);
        
        //鼠标当前位置上下两部分的距离都大于弹出层的高度
        if(cursorToTop >=doubleLayerHeight && cursorToBottom >= doubleLayerHeight){
            top_wyn = getScrollTop() + (getBrowserPosi().height - doubleLayerHeight)/2;
        }
        //鼠标当前位置以下大于弹出层的高度
        else if(cursorToBottom >= doubleLayerHeight){
//            alert('1');
            top_wyn = posi.top;
            if(cursorToTop > 20){
                top_wyn = getScrollTop() + 20;
            }
            if(cursorToTop>250){
                top_wyn = getScrollTop() + (getBrowserPosi().height - doubleLayerHeight)/2;
            }
            
        }
        //鼠标当前位置以上大于弹出层的高度
        else if(cursorToTop >= doubleLayerHeight){
//            alert('cursorToBottom===>>>' + cursorToBottom);
            if(cursorToBottom > 10){
                top_wyn = posi.top - doubleLayerHeight + cursorToBottom - (cursorToBottom/3);
            }else{
                if(cursorToTop-doubleLayerHeight > 5){
                    top_wyn = posi.top - doubleLayerHeight - 5;
                }else{
                    top_wyn = posi.top - doubleLayerHeight - (cursorToTop-doubleLayerHeight);
                }
            }
            
            if(cursorToBottom <= 40 ){
                tuqi_top_2 = posi.top - top_wyn - 40;
            }
            
        }
        //鼠标当前位置上下两部分的距离都不大于弹出层的高度（上下总和大于弹出层的高度）
        else{
            top_wyn = getScrollTop() + (getBrowserPosi().height - doubleLayerHeight)/2;
            
        }
    }
    
    var index = $(e.target).attr('index');
    var left = 0;
    if ((lWidth > $('.doubleLayer').width() && window.screen.availWidth - document.body.clientWidth > 100) || index == 4) {
        left = curOffset.left - 428;
        $('.tuqi').css( {
            left : 306
        });
        $('.tuqi > img').attr('src','http://www.cnblogs.com/image/img8a.png');
    } else {
        left = curOffset.left + 134
        $('.tuqi').css( {
            left : -14
        });
        $('.tuqi > img').attr('src','http://www.cnblogs.com/image/img8.png');
    }

    top = top_wyn;

    tuqi_top = posi.top - top_wyn;
    if(tuqi_top_2 != 8080){
        tuqi_top = tuqi_top_2;
    }
    
    $('.tuqi').css( {
        top :tuqi_top 
    })
    
    
    $('.doubleLayer').css( {
        top : top,
        left : left
    }).css('visibility', 'visible');
}

function dl_timer(e) {
    dl_cosetimer = window.setTimeout(closeDL, 50);
}

function closeDL() {
    $('.doubleLayer').css('visibility', 'hidden');
}

function dl_canceltimer() {
    if (dl_cosetimer) {
        window.clearTimeout(dl_cosetimer);
        dl_cosetimer = null;
    }
}

function createDoubleLayer(d) {
    var doubleLayer = $(".doubleLayer").html("");
    var tuqi = $("<div class=\"tuqi\"></div>").appendTo(doubleLayer).append(
            "<img src=\"http://www.cnblogs.com/image/img8.png\" alt=\"\" />");
    var dl_info_1 = $("<div class=\"dl-info-1\"></div>").appendTo(doubleLayer);
    $("<div class=\"dl-info-1-1\"></div>")
            .appendTo(dl_info_1)
            .append(
                    $("<span class=\"info-1-name fl font-2\">\u5b89\u5168\u7b49\u7ea7&nbsp;:&nbsp;</span>"))
            .append(
                    $("<span class=\"info-1-val font-3 fr\">" + d.PlantStand
                            + "</span>")).append($("<span class=\"info-1-val font-3 fr\"><img style='width:21px;height:21px;margin-top:7px;' src='"+showSecurityLevelPic(d.PlantStand)+"' /></span>"));
    
    
    
    
    $("<div></div>").appendTo(dl_info_1).append(
            $("<img class=\"dl-info-1-2\" src=\"" + d.ImageUrl + "\"/>"));
    $("<div class=\"dl-info-1-3\"></div>").appendTo(dl_info_1).append(
            $("<a href=\"#\">" + d.AgriProductName + "</a>"));
    $("<div class=\"dl-info-2\"></div>").appendTo(doubleLayer).append(
            $("<div class=\"dl-info-2-2\"></div>").append(
                    "<span>\uffe5" + d.UnitPrice + "\u5143/" + d.Unit
                            + "</span>"));
    var dl_info_3 = $("<div class=\"dl-info-3 \"></div>").appendTo(doubleLayer);
    

    if(d.OriginDistrict.length > 12){
            $("<div></div>").appendTo(dl_info_3).append(
                "<span class=\"fl sl font-2\">\u4ea7\u5730\uff1a</span><span class=\"fr sr font-3\">"
                    + d.OriginDistrict.substr(0,12) + "...</span>");
    }else{
        $("<div></div>").appendTo(dl_info_3).append(
                "<span class=\"fl sl font-2\">\u4ea7\u5730\uff1a</span><span class=\"fr sr font-3\">"
                    + d.OriginDistrict + "</span>");
    }
    $("<div></div>")
            .appendTo(dl_info_3)
            .append(
                    "<span class=\"fl sl font-2\">\u5e93\u5b58\u91cf\uff1a</span><span class=\"fr sr font-3\">"
                            + d.Stocks + d.Unit + "</span>");
    $("<div></div>")
            .appendTo(dl_info_3)
            .append(
                    "<span class=\"fl sl font-2\">\u6700\u5c0f\u8d2d\u4e70\u91cf\uff1a</span><span class=\"fr sr font-3\">"
                            + d.MinPurchase +d.Unit+ "</span>");
//    var dl_info_4 = $("<div class=\"dl-info-4\"></div>").appendTo(doubleLayer);
    
    /*
    $("<div class=\"dl-info-4-1\"></div>")
            .appendTo(dl_info_4)
            .append(
                    "<a href=\"javascript:void(0);\" class=\"fl\"><img οnclick=\"additem('"
                            + d.AgriProductID + "','" + d.Version + "','"
                            + d.MinPurchase
                            + "')\" src=\"http://www.cnblogs.com/image/img15.gif\" /></a>")
            .append(
                    "<a href=\"javascript:void(0);\" class=\"fl\"><img  οnclick=\"addFavoriteItem('"
                            + d.AgriProductID
                            + "')\" src=\"http://www.cnblogs.com/image/img16.gif\" /></a>");*/
}

var getElementMargin = {

    left : function(ele) {
        var actualLeft = ele.offsetLeft;
        var current = ele.offsetParent;
        while (current !== null) {
            actualLeft += current.offsetLeft;
            current = current.offsetParent;
        }


    if (document.compatMode == "BackCompat") {
        var elementScrollLeft = document.body.scrollLeft;
    } else {
        var elementScrollLeft = document.documentElement.scrollLeft;
    }
    return actualLeft - elementScrollLeft;
},

top : function(ele) {
    var actualTop = ele.offsetTop;
    var current = ele.offsetParent;
    while (current !== null) {
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    if (document.compatMode == "BackCompat") {
        var elementScrollTop = document.body.scrollTop;
    } else {
        var elementScrollTop = document.documentElement.scrollTop;
    }
    return actualTop - elementScrollTop;
},

bot : function(ele) {
    var actualBottom = document.body.offsetHeight - this.top(ele);
    return actualBottom;
}

};

 

转载于:https://www.cnblogs.com/fengys-moving/archive/2013/03/25/2981045.html