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

要求做个图片放大镜，单击“开启放大镜”开启放大镜效果，可对图片进行鼠标移入局部放大，单击“关闭”结束放大镜效果。比较急……，会的帮个忙，问题解决了积分(<1900)... 要求做个图片放大镜，单击 “开启放大镜” 开启放大镜效果，可对图片进行鼠标移入局部放大，单击 “关闭” 结束放大镜效果。比较急……，会的帮个忙，问题解决了积分(<1900)随便要展开

 我来答

1个回答

#热议# 应届生在签三方时要注意什么？

丹尼尔沙漏
2011-07-19 · TA获得超过159个赞

知道小有建树答主

回答量：104

采纳率：0%

帮助的人：93.7万

我也去答题访问个人页

关注

展开全部

<!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图片放大扩展，按钮开关放大镜

为你推荐：