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

时间：2024-07-01 20:37:14

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

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:;

    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:;

   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:;

    width: 100%;

    height: 100%;

    left:;

    top:;

    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;

        }

相关文章