jquery 图片放大功能如何做？

[3023369823]

花了很长时间撸了个网站，观点,其中需要一个图片放大功能，网上找了半天发现都没有中意的，最后无奈之下自己写了一个，演示地址,自我感觉效果还不错，现在分享开来给大家看看，哪里不好还请多多指教，谢谢大家。

css 部分：

.zoomify-dialog-pic {
	 position: fixed;
	 top: 0;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 background: rgba(0,0,0,0.35);
	 z-index: 99999;
	 display: none;
}

.zoomify-dialog-pic .dialog-body {
	 
	  position:absolute;
	  width: 100%;
	  max-width: 250px;
	  max-height: 300px;
	  margin-top:-150px;/*div 高度的一半*/
      margin-left:-125px;/*div 宽度的一半*/
	  top:50%;
	  left:50%;
	  padding:10px;
	  border-radius:5px;
	  background: white;
}
	 
.zoomify-dialog-pic .dialog-body img {
	 width: 100%;
}

.magnifier {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
  cursor:url('icon/magnifier.ico'),auto;
}

.un-magnifier {
  cursor: -moz-zoom-in;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
  cursor:url('icon/unmagnifier.ico'),auto;
}

说明下,上面 css 的 cursor:url 请放到自己的图片服务器上，万恶的 IE 不支持本地

js 部分：

var ROOT = $("input[name='globalPath']").val();

function zoomOut(orginImg,times){
	
	var obj=$(".zoomify-dialog-pic .dialog-body");
	var img=$(".zoomify-dialog-pic .dialog-body img");

	var imgW=$(orginImg).width();
	var imgH=$(orginImg).height();

	var newH=imgH*times;
	var newW=imgW*times;
	
	var bodyH=$("body").height();
	var bodyW=$("body").width();
	
	if(newW>bodyW){
		newW=bodyW-40;
		obj.css("padding","5px");
	}
	
	if(newH>bodyH){
		newH=bodyH-40;
		obj.css("padding","5px");
	}
	
	//图片新高度、宽度
	img.css("width",newW+"px");
	img.css("height",newH+"px");
	
	//容器新高度、宽度,因为图片放大了，所以容器也必须放大
	//不要用 padding 属性，ie 下不支持
	var padding=parseInt(obj.css("padding-top"));
	
	cWith=newW+padding*2;
	cHeight=newH+padding*2;
	
	obj.css("max-width",cWith+"px");
	obj.css("max-height",cHeight+"px");
	
	obj.css("margin-left",(cWith/2)*-1+"px");
	obj.css("margin-top",(cHeight/2)*-1+"px");
}

function insertPic(url){
	html='<div class="zoomify-dialog-pic">'+
		'<div class="dialog-body">'+
			'<img src="'+url+'" class="un-magnifier">'+
		'</div>'+
	'</div>';
	return html;
}

$(".page-content-l").on('click','p img',function(){

	var url=$(this).attr('src');
	html=insertPic(url);
	$("body").append(html);
	
	zoomOut(this,1.2);
	$(".zoomify-dialog-pic").show();
});

$("html").on('click','.zoomify-dialog-pic',function(){
	$(this).remove();
});

$(".page-content-l").on("mouseover mouseout","p img",function(event){
	if(event.type == "mouseover"){
		$(this).addClass("magnifier");
	}else if(event.type == "mouseout"){
		$(this).removeClass("magnifier");
	}
}); 

代码是毫无保留公开，绝对可以使用的，喜欢给我点个赞，也可以加我的 qq 群交流：284205104，谢谢您的阅读。

[swordne]

话说，这种，layer 什么的不都有么。