首页 > 代码库 > js点击图片查看大图,并可以拖动,且滚动滑轮放大缩小
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; }.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;" />
js点击图片查看大图,并可以拖动,且滚动滑轮放大缩小
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。