方法一：此方法在页面没有滚动条时无法缩放
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].οndragstart=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].οndragstart=imgdragstart; }
