一个分享个人学习、开发经验的Blog,http://www.joyphper.net

图片放大镜js代码

posted @ 2012-05-27 17:20 | 阅读:2503 | 评论:1 | 分类: Javascript , 代码分享

 

<style type="text/css">
.img_warp {
	width: 318px;
	_height: 199px;
	_overflow: hidden;
	border: 1px solid #ccc;
	padding: 0px;
	margin-left: 0px;
	margin-top: 0px;
	position: absolute;
	top: 0px;
	left: 0px;
}

.img_warp {
	position: relative;
	top: 0px;
	left: 0px; /*cursor:crosshair*/
}

.img_warp .current {
	width: 318px;
	height: 199px
}

.expand {
	border-bottom: #555 1px solid;
	border-left: #555 1px solid;
	margin: -200px 0px 0px 400px;
	width: 400px;
	height: 400px;
	overflow: hidden;
	border-top: #555 1px solid;
	border-right: #555 1px solid
}
</style>
<script type="text/javascript">
var $E = function(opts){
	function _(objId){return (typeof objId === "string")?document.getElementById(objId):objId;}
	var beImg,expand,clip,cover,warp,expImg;
	var clipWidth,clipHeight;
	var closeTimeId = null;
	var mult = 1; //图片放大倍数,根据裁剪框和放大后图片容器的大小自动调整
	//init
	(function(){
		beImg = _(opts.berviary);
		warp = beImg.parentNode;
		
		cover = document.createElement("div");
		warp.appendChild(cover);
		cover.style.position = "absolute";
		cover.style.top = "0px";
		cover.style.left = "0px";
		cover.style.backgroundColor = "#ccc";
		var opac = parseFloat(opts.opacity) || 0.3;
		cover.style.opacity = opac;
		cover.style.filter = "Alpha(Opacity=" + opac * 100 + ")";
		cover.style.width = "100%";
		cover.style.height = "100%";
		cover.style.zIndex = 2;
		cover.style.visibility = "hidden";
	
		clip = document.createElement("img");
		warp.appendChild(clip);
		
		clipWidth = (opts.clip && opts.clip.width) || "60px";
		clipHeight = (opts.clip && opts.clip.height) || "60px";
		
		clip.src = beImg.src;
		clip.className = beImg.className;
		clip.style.position = "absolute";
		clip.style.top = "0px";
		clip.style.left = "0px";
		clip.style.clip = "rect(0px," + clipWidth + "," + clipHeight + ",0px)";
		clip.style.backgroundColor = "#ccc";
		clip.style.zIndex = 3;
		
		//ie里面会变态的自动设置宽度和高度
		clip.removeAttribute("width");
		clip.removeAttribute("height");
	})();

	function layerPos(e){
		if(e.layerX && e.layerY){
			return {x:e.layerX,y:e.layerY};
		} else {
			return {x:e.x,y:e.y};
		}
	}
	
	function absolutePos(e){
		if(e.pageX && e.pageY){
			return {x:e.pageX,y:e.pageY};
		} else {
			var x = e.clientX + (document.documentElement.scrollLeft?document.documentElement.scrollLeft : document.body.scrollLeft);
			var y = e.clientY + (document.documentElement.scrollTop?document.documentElement.scrollTop : document.body.scrollTop);
			return {x:x,y:y};
		}
	}
	var showExpand = function(x,y,e){
		if(!expand){
			initExpand();
		}
		expImg.style.left = (-1 * x) * mult + "px";
		expImg.style.top = (-1 * y ) * mult + "px";
	
		if((!opts.expand) || (!opts.expand.id)){
			var aPos = absolutePos(e);
			expand.style.left = aPos.x + parseFloat(clipWidth) / 2 + 20 + "px";
			expand.style.top = aPos.y + "px";
		}
		//初始化放大的div
		function initExpand(){
			if(opts.expand && opts.expand.id) {
				expand = _(opts.expand.id);
			} else {
				expand = document.createElement("div");
				if(opts.expand && opts.expand.style){
					for(var p in opts.expand.style){
						expand.style[p] = opts.expand.style[p];
					}
				}
				expand.style.border = "1px solid #000";
				
				expand.style.position = "absolute";
				expand.style.left ="0";
				expand.style.right = "0";
				expand.style.display = "block";
				document.body.appendChild(expand);
			
				if(clip.clientWidth>clip.clientHeight){
					expand.style.width = clip.clientWidth + "px";
					expand.style.height = clip.clientWidth * parseFloat(clipHeight) / parseFloat(clipWidth) + "px";
				} else {
					expand.style.height = clip.clientHeight + "px";
					expand.style.width = clip.clientHeight * parseFloat(clipWidth) / parseFloat(clipHeight) + "px";
				}
				expand.style.zIndex = 4;
			}
		
			expand.style.overflow = "hidden";
			if((expand.style.position != "relative") && (expand.style.position != "absolute")){
				//变态的ie6和ie7的img如果为relative,需要设置其父节点也为relative,否则overflow:hidden无效
				expand.style.position = "relative";
				expand.style.left = "0";
				expand.style.top = "0";
			}
			expImg = document.createElement("img");
			expImg.src = beImg.src;
			expImg.style.position = "relative";
			expImg.style.left = "0px";
			expImg.style.top = "0px";
			expand.appendChild(expImg);
			expImg.removeAttribute("width");
			expImg.removeAttribute("height");
		
			//计算图片放大的倍数
			var ew = expand.clientWidth;
			var eh = expand.clientHeight;
			var cw = parseFloat(clipWidth);
			var ch = parseFloat(clipHeight);
			mult = (ew/cw < eh/ch) ? ew/cw : eh/ch;
			
			//调整放大图片的大小
			expImg.style.width = beImg.clientWidth * mult + "px";
			expImg.style.height = beImg.clientHeight * mult + "px";
		}
	}

	cover.onmousemove = clip.onmousemove = function(e){
		var e = e || event;
		var pos = layerPos(e);
		var x = pos.x;
		var y = pos.y;
		//判断x和y坐标有没有超出范围
		var w = parseFloat(clipWidth) / 2,h = parseFloat(clipHeight) / 2;
		x = (x < w)?w:x;
		y = (y < h)?h:y;
		x = (x > warp.clientWidth - w) ? (warp.clientWidth - w) : x;
		y = (y > warp.clientHeight - h) ? (warp.clientHeight - h) : y;
		clip.style.clip = "rect(" + (y - h) + "px," + (x + w) + "px," + (y + h) + "px," + (x - w) + "px)";
		showExpand(x - w,y - h,e);
	}
	warp.onmouseover = cover.onmouseover = clip.onmouseover = function(){
		//如果清除的定时器存在,则删除.
		if(closeTimeId){
			clearTimeout(closeTimeId);
			closeTimeId = null;
		}
		if(cover.style.visibility === "hidden"){
			cover.style.visibility = "visible";
		}
		if(expand && expand.style.display === "none"){
			expand.style.display = "block";
		}
	}

	warp.onmouseout = function(){
		//延迟一定时间后清除
		closeTimeId = setTimeout(function(){
			cover.style.visibility = "hidden";
			if((!opts.expand) || (!opts.expand.id)){
				expand.style.display = "none";
			}
		},130);
	}

	return {
		clear:function(){
			//在这里清除放大镜效果
			warp.removeChild(clip);
			warp.removeChild(cover);
			warp.onmouseout = null;
			if((!opts.expand) || (!opts.expand.id)){
				expand.style.display = "none";
			}
		}
	}
}
</script>


<div id="img_warp" class="img_warp">
	<img id="currentPic1" class="current" border="0" alt=""
		src=http://www.joyphper.net/upload/201011/2010111910301220.jpg />
</div>
<div id="expand" class="expand"></div>
</div>
<script type="text/javascript">
$E({
	berviary:"currentPic1",
	expand:{id:"expand",style:{}},
	clip:{width:"50px",height:"50px"},
	opacity:"0.2"}
);
</script>

 

TAG: 图片放大镜 , javascript

共有1条评论 发表评论>>

Bardo 发表于:2016-05-18 19:14
Guarda io lo uso da parecchio tempo. Prima ne usavo un altro (non ricordo il nome) ed ad un certo punto voleva dei soldiR30; ma per favore!Ho notato anchR17;io però in questa versione di toucan un crash usando la funzione agairongR30; sistemeranno
点击换一张验证码