方法一：此方法在頁面沒有滾動條時無法縮放

?

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

?

轉載于:https://www.cnblogs.com/oospace/p/4250898.html

總結

以上是生活随笔為你收集整理的js点击图片查看大图，并可以拖动，且滚动滑轮放大缩小的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。