js点击图片查看大图，并可以拖动，且滚动滑轮放大缩小
生活随笔
收集整理的這篇文章主要介紹了
js点击图片查看大图，并可以拖动，且滚动滑轮放大缩小
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
方法一：此方法在頁面沒有滾動條時無法縮放
?
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");//點擊（松開后觸發(fā)）//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;//移動時根據(jù)鼠標位置計算控件左上角的絕對位置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;
}
}
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);
}
?
轉(zhuǎn)載于:https://www.cnblogs.com/oospace/p/4250898.html
總結(jié)
以上是生活随笔為你收集整理的js点击图片查看大图，并可以拖动，且滚动滑轮放大缩小的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript的关于刷新页面给出提
- 下一篇： 在线自动下载最新版本jquery