zoukankan      html  css  js  c++  java
  • lightbox源码解析

    function getPageScroll(){

    var yScroll;

    if (self.pageYOffset) {
    yScroll = self.pageYOffset; //NS
    } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
    yScroll = document.documentElement.scrollTop;
    } else if (document.body) {// all other Explorers
    yScroll = document.body.scrollTop;
    }

    arrayPageScroll = new Array(”,yScroll)
    return arrayPageScroll;
    }

    1. self
    打开任何一个网页,浏览器会首先创建一个窗口,这个窗口就是一 个window 对象,也是 js 运行所依附的全局环境对象和全局作用域对象。
    self 指窗口本身,它返回的对象 跟window 对象是一模一样的。也正因为如此,window 对象的常用方法和函数都可以用 self 代替 window。

    2. 获得窗口的滚动偏移量
    * OmniWeb 4.2-, NetFront 3.3- 下无法获得.
    * Safari 和 OmniWeb 4.5+ 有 bug,但无影响.

    有三种方法获取滚动条的位置。
    1. window.pageXOffset/pageYOffset 大多数浏览器,非常可靠
    2. document.documentElement.scrollLeft/Top Strict 模式下的 IE6 和其它很少一些浏览器
    3. document.body.scrollLeft/Top IE6 和 其它一些浏览器

    浏览器在支持 document.body 或者 document.documentElement 的情况下,如果提供了 scrollLeft/Top,那么除了 Safari 和 OmniWeb 4.5+ 外, 这些值都是
    很可靠的。在 Safari and OmniWeb 4.5+ 中,当滚动条偏移量为 0 时,会返回 -8,其它情况下正常。当然了,因为它们提供了正确的 window.pageXOffset/pageYOffset,
    这个 bug 不会造成什么影响。

    function getPageSize(){

    //整个页面的大小
    var xScroll, yScroll;

    if (window.innerHeight && window.scrollMaxY) {
    xScroll = document.body.scrollWidth;
    yScroll = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
    xScroll = document.body.scrollWidth;
    yScroll = document.body.scrollHeight;
    } else { // Explorer Mac…would also work in Explorer 6 Strict, Mozilla and Safari
    xScroll = document.body.offsetWidth;
    yScroll = document.body.offsetHeight;
    }

    //可见窗口(view port)的大小
    var windowWidth, windowHeight;
    if (self.innerHeight) { // all except Explorer
    windowWidth = self.innerWidth;
    windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
    windowWidth = document.documentElement.clientWidth;
    windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
    windowWidth = document.body.clientWidth;
    windowHeight = document.body.clientHeight;
    }

    // for small pages with total height less then height of the viewport
    if(yScroll < windowHeight){
    pageHeight = windowHeight;
    } else {
    pageHeight = yScroll;
    }

    // for small pages with total width less then width of the viewport
    if(xScroll < windowWidth){
    pageWidth = windowWidth;
    } else {
    pageWidth = xScroll;
    }


    arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
    return arrayPageSize;
    }

    文档加载完之前是无法获取窗口大小值的,而且还要对不同浏览器使用不同的方法。可用参数如下:
    1. window.innerHeight/Width IE 除外的大多数浏览器
    2. document.body.clientHeight/Width 包括 IE 在内的大多数浏览器
    3. document.documentElement.clientHeight/Width 包括 IE 在内的大多 DOM 浏览器

    关于 clientHeight/Width 会有点乱,因为在不同浏览器下,甚至在同一个浏览器下 clientHeight/Width 都可能不同,要看文档类型激发的是浏览器的
    strict 模式还是 quirks 模式。有时,它们指的是窗口的尺寸,有时是文档内容的尺寸。下表展示了不同浏览器、不同模式中的属性:



    Properties and what they relate to
    Browser window.
    innerHeight
    document.
    body.
    clientHeight
    document.
    documentElement.
    clientHeight
    Opera 9.5+ strict window document window
    Opera 9.5+ quirks window window document
    Opera 7-9.2 window window document
    Opera 6 window window N/A
    Mozilla strict window document window
    Mozilla quirks window window document
    KHTML window document document
    Safari window document document
    iCab 3 window document document
    iCab 2 window window N/A
    IE 6+ strict N/A document window
    IE 5-7 quirks N/A window 0
    IE 4 N/A window N/A
    ICEbrowser window window document
    Tkhtml Hv3 window window document
    Netscape 4 window N/A N/A

    如上所示,好歹还是有个值是确定的:innerHeight,不过 IE 却不支持这个属性。目前,几乎所有的浏览器都支持使用 window.innerHeight/Width 属性。

    算法逻辑:
    1. 如果存在 window.innerHeight/Width 属性, 是可以完全信赖的, 使用 window.innerHeight/Width 就可以了.
    2. 否则如果存在 document.documentElement.clientHeight/Width 属性且值大于 0,就用 document.documentElement.clientHeight/Width.
    3. 否则就用 document.body.clientHeight/Width.

    此算法在 IE6+ “standards compliant mode” 下,当窗口所谓 0px × 0px 大小时,失效。


    function showLightbox(objLink)
    {
    // prep objects
    var objOverlay = document.getElementById(‘overlay’);
    // overlay 为遮罩层
    var objLightbox = document.getElementById(‘lightbox’);
    var objCaption = document.getElementById(‘lightboxCaption’);
    var objImage = document.getElementById(‘lightboxImage’);
    var objLoadingImage = document.getElementById(‘loadingImage’);
    // 加载图片
    var objLightboxDetails = document.getElementById(‘lightboxDetails’);


    var arrayPageSize = getPageSize();
    var arrayPageScroll = getPageScroll();

    // center loadingImage if it exists
    if (objLoadingImage) {
    // arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
    objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] – 35 – objLoadingImage.height) / 2) + ‘px’);
    // top = 滚动条位置 + [视口高度 - 35px(浏览器状态栏高度) - 加载图片的高度]/2
    objLoadingImage.style.left = (((arrayPageSize[0] – 20 – objLoadingImage.width) / 2) + ‘px’);
    objLoadingImage.style.display = ‘block’;
    // 设置加载图片在页面中间,浏览器状态栏高度约为 35px,滚动条栏宽度约为 20px。
    }

    // set height of Overlay to take up whole page and show
    // 设置遮罩层高度
    objOverlay.style.height = (arrayPageSize[1] + ‘px’);
    objOverlay.style.display = ‘block’;

    // preload image
    imgPreload = new Image();

    imgPreload.onload=function(){
    objImage.src = objLink.href;

    // center lightbox and make sure that the top and left values are not negative
    // and the image placed outside the viewport
    var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] – 35 – imgPreload.height) / 2);
    var lightboxLeft = ((arrayPageSize[0] – 20 – imgPreload.width) / 2);

    objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";
    objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";


    objLightboxDetails.style.width = imgPreload.width + ‘px’;

    if(objLink.getAttribute(‘title’)){
    objCaption.style.display = ‘block’;
    objCaption.innerHTML = objLink.getAttribute(‘title’);
    } else {
    objCaption.style.display = ‘none’;
    }

    // A small pause between the image loading and displaying is required with IE,
    // this prevents the previous image displaying for a short burst causing flicker.
    if (navigator.appVersion.indexOf(“MSIE”)!=-1){
    pause(250);
    }

    if (objLoadingImage) { objLoadingImage.style.display = ‘none’; }
    // 隐藏加载图

    // Hide select boxes as they will ‘peek’ through the image in IE
    selects = document.getElementsByTagName(“select”);
    for (i = 0; i != selects.length; i++) {
    selects[i].style.visibility = “hidden”;
    }


    objLightbox.style.display = ‘block’;

    // After image is loaded, update the overlay height as the new image might have
    // increased the overall page height.
    arrayPageSize = getPageSize();
    objOverlay.style.height = (arrayPageSize[1] + ‘px’);

    // Check for ‘x’ keypress
    listenKey();

    return false;
    }

    imgPreload.src = objLink.href;

    }
     

  • 相关阅读:
    Eclipse安装Hadoop插件
    (转)Ubuntu14.0.4中hadoop2.4.0伪分布模式配置
    Hadoop--DataNode无法启动
    启动与关闭hadoop
    hadoop中执行命令时发生错误
    strings命令
    Deriving data from ElasticSearch Engine
    elasticsearch data importing
    reading words in your computer and changing to female voice, linux festival text2wave saving wav files
    DDNS client on a Linux machine
  • 原文地址:https://www.cnblogs.com/shihao/p/2296065.html
Copyright © 2011-2022 走看看