js点击图片查看大图，并可以拖动，且滚动滑轮放大缩小

方法一：此方法在页面没有滚动条时无法缩放

 

JQuery

function hideMax(){
    $(".MAX_div").remove();
    $("#Cover_Div").hide();
 }
    function showMax(url){
        $("#Cover_Div").show();
        var Image=function(){
            return document.createElement("img");
        }  
        var DIV=function(){
            return document.createElement("div");
        }          
        var div=new DIV();    
        var close_div=new DIV();
        var close_img=new Image();    
        var img=new Image();
        var _enter=false;
            $(".MAX_div").remove();
            div.setAttribute("class","MAX_div");
            close_div.setAttribute("class","close");
            close_div.setAttribute("title","点击关闭");
             
            
            img.setAttribute("class","showMax");
            img.src=url;
            close_img.src="tpl/images/delete.png";
            img.onmouseover=function(){
                _enter=true;
            }
            img.onmouseout=function(){
                _enter=false;
            }
            close_div.onclick=function(){
                hideMax();
            }
            close_div.appendChild(close_img);
            div.appendChild(img);
            div.appendChild(close_div);
            document.body.appendChild(div);
            
            //var _z=9999;
            var close=$(".close");
            $(document).ready(function(){
             var _move=false;//移动标记
             var _x,_y;//鼠标离控件左上角的相对位置
             var wd;//窗口
                $(".showMax").click(function(){
                    //alert("click");//点击（松开后触发）
                 //this.style.cursor = "default";//鼠标形状
                 //this.style.zIndex = 999;
                    }).mousedown(function(e){
                    _move=true;
                    wd=$(this);
                    
                    //this.style.cursor = "move";//鼠标形状
                   // this.style.zIndex = _z;//窗口层次
                   // _z++;
                    _x=e.pageX-(isNaN(parseInt(wd.css("left")))?0:parseInt(wd.css("left")));
                    _y=e.pageY-(isNaN(parseInt(wd.css("top")))?0:parseInt(wd.css("top")));       

                    c_x=e.pageX-(isNaN(parseInt(close.css("left")))?0:parseInt(close.css("left")));
                    c_y=e.pageY-(isNaN(parseInt(close.css("top")))?0:parseInt(close.css("top"))); 
                    
                    /*  wd.fadeTo(20, 0.25); *///点击后开始拖动并透明显示
                    $(document).mousemove(function(e){
                        if(_move){
                            var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
                            var y=e.pageY-_y;

                            var closeX=e.pageX-c_x;
                            var closeY=e.pageY-c_y;
                            wd.css({top:y,left:x});//控件新位置
                            close.css({top:closeY,left:closeX});
                        }
                    }).mouseup(function(){
                    _move=false;
                    /* wd.fadeTo("fast", 1); *///松开鼠标后停止移动并恢复成不透明
                  });
                });
                
            });
           
            //$(".showMax").mouseover(function(){
                
                var scrollTop = $(window).scrollTop();
                var initTop=scrollTop;

                var screenheight = window.screen.availHeight; //获取屏幕高   
                $(window).scroll( function() { 
                    scrollTop = $(window).scrollTop();;
                    var w=parseInt($(".showMax").css("width"));
                    var h=parseInt($(".showMax").css("height"));
                    
                        if(scrollTop > initTop&&_enter){
                            $(".showMax").css({"width":w+Number(28)+"px","height":h+Number(50)+"px"});
                            close.css("margin-left",(w-125)<125?125:(w-125)+"px");
                            $(window).scrollTop(initTop);//保持滚动条距离底部0px 
                        } 
                        if(scrollTop <initTop&&_enter){
                            $(".showMax").css({"width":(w-28)<280?280:(w-28)+"px","height":(h-50)<500?500:(h-50)+"px"});
                            close.css("margin-left",(w-155-28)<125?125:(w-155-28)+"px");
                            $(window).scrollTop(initTop);//保持滚动条距离底部0px 
                        }
                    
                    //initTop=scrollTop;   
                });
            //})
            
            
            
            
            function imgdragstart(){return false;}  
            for(i in document.images)document.images[i].ondragstart=imgdragstart; 
        }

 
    

CSS

.showMax{
    padding:5px;
    padding-top:30px;
    border-radius:3px;
    position:fixed;
    z-index:999991;
    top:25%;
    width:280px;
    height:500px;
    left:50%;
    margin-left:-140px;
    background-color:orange;
    cursor:move;    
}
.MAX_div{

}
.close{
   color:#ffffff;
   position:fixed;
   z-index:999992;
   width:14px;
   height:14px;
   top:25%;
   left:50%;
   margin-left:125px;
   margin-top:8px;

}
li >img:hover{
    border:1px solid orange;
    cursor:crosshair;
}
#Cover_Div{
    position: fixed;
    z-index: 9999; 
    width: 100%;
    height: 100%; 
    left: 0; 
    top: 0;
    min-width: 700px;
    min-height: 740px;      
    opacity: 0.5; 
    filter: alpha(opacity = 50); 
    background-color: #ffffff; 
    display:none;
}
.cut{
    font-weight:bold;
    font-weight:normal\0;
    font-size:18px;
    height:30px;
    max-height:35px;
    color:#FFFFFF;
    font-family:楷书;
}

Html

<img  onclick="showMax('url")"  src="url" style="width:288px;height:216px;" />
<div id="Cover_Div" onClick="hideMax()"></div>

 方法二：

JS（其它同上）

function hideMax(){
    $(".MAX_div").remove();
    $("#Cover_Div").hide();
 }
    var _enter=false;
     var scrollFunc = function (e) {
        e = e || window.event;

if(_enter){
if (e&&e.preventDefault){
e.preventDefault();
e.stopPropagation();
}else{
e.returnvalue=false;
}
}

var w=parseInt($(".showMax").css("width"));
        var h=parseInt($(".showMax").css("height"));
                    
                    
        if (e.wheelDelta&&_enter) {  //判断浏览器IE，谷歌滑轮事件             
            if (e.wheelDelta > 0) { //当滑轮向上滚动时
                $(".showMax").css({"width":w+Number(28)+"px","height":h+Number(50)+"px"});
                $(".close").css("margin-left",(w-125)<125?125:(w-125)+"px");
            }
            if (e.wheelDelta < 0) { //当滑轮向下滚动时
                 $(".showMax").css({"width":(w-28)<280?280:(w-28)+"px","height":(h-50)<500?500:(h-50)+"px"});
                 $(".close").css("margin-left",(w-155-28)<125?125:(w-155-28)+"px");
            }
        } else if (e.detail&&_enter) {  //Firefox滑轮事件
            if (e.detail> 0) { //当滑轮向下滚动时

                 $(".showMax").css({"width":(w-28)<280?280:(w-28)+"px","height":(h-50)<500?500:(h-50)+"px"});
                 $(".close").css("margin-left",(w-155-28)<125?125:(w-155-28)+"px");

             } 
           if (e.detail< 0) { //当滑轮向上滚动时 

                 $(".showMax").css({"width":w+Number(28)+"px","height":h+Number(50)+"px"});
                 $(".close").css("margin-left",(w-125)<125?125:(w-125)+"px");

          }
 } } //给页面绑定滑轮滚动事件

if (document.addEventListener) {
//webkit
document.addEventListener('mousewheel', scrollFunc, false);
//firefox
document.addEventListener('DOMMouseScroll', scrollFunc, false);

}else if(window.attachEvent){//IE
document.attachEvent('onmousewheel',scrollFunc);
}

function showMax(url){
        $("#Cover_Div").show();
        var Image=function(){
            return document.createElement("img");
        }  
        var DIV=function(){
            return document.createElement("div");
        }          
        var div=new DIV();    
        var close_div=new DIV();
        var close_img=new Image();    
        var img=new Image();
      
            $(".MAX_div").remove();
            div.setAttribute("class","MAX_div");
            close_div.setAttribute("class","close");
            close_div.setAttribute("title","点击关闭");
             
            
            img.setAttribute("class","showMax");
            img.src=url;
            close_img.src="img/delete.png";
            img.onmouseover=function(){
                _enter=true;
            }
            img.onmouseout=function(){
                _enter=false;
            }
            close_div.onclick=function(){
                hideMax();
            }
            close_div.appendChild(close_img);
            div.appendChild(img);
            div.appendChild(close_div);
            document.body.appendChild(div);
            
            //var _z=9999;
            var close=$(".close");
            $(document).ready(function(){
             var _move=false;//移动标记
             var _x,_y;//鼠标离控件左上角的相对位置
             var wd;//窗口
                $(".showMax").click(function(){
                    //alert("click");//点击（松开后触发）
                 //this.style.cursor = "default";//鼠标形状
                 //this.style.zIndex = 999;
                    }).mousedown(function(e){
                    _move=true;
                    wd=$(this);
                    
                    //this.style.cursor = "move";//鼠标形状
                   // this.style.zIndex = _z;//窗口层次
                   // _z++;
                    _x=e.pageX-(isNaN(parseInt(wd.css("left")))?0:parseInt(wd.css("left")));
                    _y=e.pageY-(isNaN(parseInt(wd.css("top")))?0:parseInt(wd.css("top")));       

                    c_x=e.pageX-(isNaN(parseInt(close.css("left")))?0:parseInt(close.css("left")));
                    c_y=e.pageY-(isNaN(parseInt(close.css("top")))?0:parseInt(close.css("top"))); 
                    
                    /*  wd.fadeTo(20, 0.25); *///点击后开始拖动并透明显示
                    $(document).mousemove(function(e){
                        if(_move){
                            var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
                            var y=e.pageY-_y;

                            var closeX=e.pageX-c_x;
                            var closeY=e.pageY-c_y;
                            wd.css({top:y,left:x});//控件新位置
                            close.css({top:closeY,left:closeX});
                        }
                    }).mouseup(function(){
                    _move=false;
                    /* wd.fadeTo("fast", 1); *///松开鼠标后停止移动并恢复成不透明
                  });
                });
                
            });
           
            
            //禁止拖动页面图片在新窗口打开
            function imgdragstart(){return false;}  
            for(i in document.images)document.images[i].ondragstart=imgdragstart; 
        }