JavaScript相册单图放大预览

源码下载

JavaScript相册单图放大预览第二版（js控制图片上下居中）

已实现原生Js、jQuery2种方式

zoomify css:

.zoomify img{ cursor: pointer; cursor: -webkit-zoom-in; cursor: zoom-in;}
.zoomify-shadow { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: none; z-index: 1500; background-color: #000;   background: rgba(0, 0, 0 , .8); filter: alpha(opacity=80);opacity:0.8; -moz-opacity:0.8;  }
.zoomify-shaimg{position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: none; z-index: 1501; overflow:scroll;}
.zoomify-shaimg img{ display: block; margin:0 auto; padding:30px;}
.zoomify-shaimg.zoomout{cursor: pointer; cursor: -webkit-zoom-out; cursor: zoom-out;}
.zoomify-shaimg.zoomin{cursor: pointer; cursor: -webkit-zoom-in; cursor: zoom-in; }



在需要实现的模块中加入class="zoomify"
<div class="zoomify">
  <img src="images/33a.bmp">
  <img src="images/33c.bmp">
  <img src="images/33d.bmp">
</div>

body中加入zoomify html
<div class="zoomify-shadow">
</div>
<div class="zoomify-shaimg zoomout">
<img src="" /></div>


//jquery实现，需引用jquery脚本库
$(function() {
    $(".zoomify-shadow").css("width", $(document).width()).css("height", $(document).height());
    $(".zoomify-shaimg").css("width", $(document).width()).css("height", $(document).height());
    $(".zoomify-shadow,.zoomify-shaimg").click(function() {
        $(".zoomify-shadow,.zoomify-shaimg").hide();
    });
    $(".zoomify img").live("click", function() {
        $(".zoomify-shaimg img").attr("src", $(this).attr("src"));
        $(".zoomify-shadow,.zoomify-shaimg").show();
    });
    $(".zoomify img,.zoomify-shaimg").live("mousedown", function(e) {
        e.preventDefault();
    });
});



//原生js实现，无需引用jquery
window.onload = function () {
    var zoomify_width = document.body.offsetWidth;
    var zoomify_height = document.body.offsetHeight;
    var zoomify_shadow = getElementByClassName("zoomify-shadow")[0];
    var zoomify_shaimg = getElementByClassName("zoomify-shaimg")[0];

    zoomify_shadow.style.width = zoomify_width;
    zoomify_shadow.style.height = zoomify_height;
    zoomify_shaimg.style.width = zoomify_width;
    zoomify_shaimg.style.height = zoomify_height;

    addEvent(zoomify_shadow, "click", zoomifyhide);
    addEvent(zoomify_shaimg, "click", zoomifyhide);
    var zoomify_img = getElementByClassName("zoomify")[0];
    var argimg = zoomify_img.getElementsByTagName("img");

    for (var i = 0; i < argimg.length; i++) {
        addEvent(argimg[i], "click", zoomifyshow)
    }

    function zoomifyshow() {
        var show_img = zoomify_shaimg.getElementsByTagName("img")[0];
        show_img.setAttribute("src", this.getAttribute("src"));

        zoomify_shadow.style.display = "block";
        zoomify_shaimg.style.display = "block";
    }
    function zoomifyhide() {
        zoomify_shadow.style.display = "none";
        zoomify_shaimg.style.display = "none";
    }
}

//根据ClassName获取元素 =>Element指定查找元素的父级元素 | ClassName筛选的class名字
function getElementByClassName(element, className) {
    className = arguments[1] ? arguments[1] : arguments[0];
    element = arguments[1] ? arguments[0] : document;
    if (document.getElementsByClassName) {
        //如果浏览器支持getElementsByClassName，则使用原生getElementsByClassName
        return element.getElementsByClassName(className);
    } else {
        //反之使用getElementsByTagName遍历筛选
        var arg = element.getElementsByTagName("*");
        var css = [], arr = [];
        for (var i = 0; i < arg.length; i++) {
            css = arg[i].ClassName.split(' ');
            for (var j = 0; j < css.length; j++) {
                if (css[j] == className) {
                    arr.push(arg[i]);
                }
            }
        }
        return arr; //class结果集
    }
}

//绑定事件监听函数
//=> elementObject 	DOM对象（即DOM元素）
//=> handle 	事件句柄函数，即用来处理事件的函数。
// => eventName 	事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，
//       鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
function addEvent(element, eventName, handle) {
    try {  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
        element.addEventListener(eventName, handle, false);
    } catch (e) {
        try {  // IE8.0及其以下版本
            element.attachEvent('on' + eventName, handle);
        } catch (e) {  // 早期浏览器
            element['on' + eventName] = handle;
        }
    }
}