当前位置:编程学习 > JS >>

JS图片放大扩展,按钮开关放大镜

要求做个图片放大镜,单击 “开启放大镜” 开启放大镜效果,可对图片进行鼠标移入局部放大, 单击 “关闭” 结束 放大镜效果。比较急……,会的帮个忙,问题解决了积分(<1900)随便要
答案:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>放大镜</title>
	<meta name="keywords" content="" />
	<meta name="Description" content="" />
	<style type="text/css">
		body,div,img {padding:0;margin:0;}
		.con {width:256px;height:192px;float:left;}
		.con img {width:256px;height:192px;position:absolute;border:1px blue solid;}
		.dingwei {position:absolute;width:100px;height:100px;background-color:black;filter:alpha(opacity=20);opacity:0.2;cursor:move;display:none;}
		.big {float:left;width:400px;height:400px;margin:100px;overflow:hidden;}
		
	</style>
</head>
<body>
	<div class="con" id="father" style="position:relative;">
		<img src="images/huo.jpg" alt="图片"/>
		<div id="aa" class="dingwei"> </div>
	</div>
	<div class="big" id="bpic">
		<div class="inside"><img src="images/huo.jpg" alt="图片"/></div>
	</div>

	<script type="text/javascript">
		var divs=document.getElementById("aa");
		var fa=document.getElementById("father");
		var maxWidth=maxHeight=S=0;
		var big=document.getElementById("bpic");
		fa.onmouseover=function(){
			divs.style.display="block";
			big.style.display="block";
			S=divs.offsetHeight/2;
			maxWidth=fa.clientWidth-divs.offsetWidth;
			maxHeight=fa.clientHeight-divs.offsetHeight;//物块的活动范围;
		}
		fa.onmousemove=function(e){
			a=e||window.event;
			var sbX=a.clientX;
			var sbY=a.clientY;
			var num=big.clientWidth/divs.clientWidth;
			var lf=sbX-S;//鼠标的位置减去元素位置的一半的值就是元素的定位值;
			var tp=sbY-S;
			//tp =tp<0?0:tp>maxHeight?maxHeight:tp;
			//lf =lf<0?0:lf>maxWidth?maxWidth:lf;//判断物块的定位位置然后进行设置
			if(tp<0){tp=0;}
			else{
				if(tp>maxHeight){tp=maxHeight;}
				else{tp=sbY-S;}
			}
													//判断物块的位置进行设置
			if(lf<0){lf=0;}
			else{
				if(lf>maxWidth){lf=maxWidth;}
				else{lf=sbX-S;}
			}
			divs.style.left=lf+"px";
			divs.style.top=tp+"px";
			big.scrollLeft=num*lf;
			big.scrollTop=num*tp;
		}
		fa.onmouseout=function(){
			divs.style.display="none";
			big.style.display="none";
		}
		
	</script>	 
</body>
</html>

这是放大镜效果的代码  你说的开启和关闭你自己再加上去就行了

上一个:用JS调用ActiveX问题
下一个:新手求助个简单js问题

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,