JS图片放大扩展,按钮开关放大镜
要求做个图片放大镜,单击 “开启放大镜” 开启放大镜效果,可对图片进行鼠标移入局部放大, 单击 “关闭” 结束 放大镜效果。比较急……,会的帮个忙,问题解决了积分(<1900)随便要
要求做个图片放大镜,单击 “开启放大镜” 开启放大镜效果,可对图片进行鼠标移入局部放大, 单击 “关闭” 结束 放大镜效果。比较急……,会的帮个忙,问题解决了积分(<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问题