<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8"/>
<title>放大镜</title>
<meta name="keywords" content="" />
<meta name="Description" content="" />
<style type="text/css">
body,div,img {padding:0margin:0}
.con {width:256pxheight:192pxfloat:left}
.con img {width:256pxheight:192pxposition:absoluteborder:1px blue solid}
.dingwei {position:absolutewidth:100pxheight:100pxbackground-color:blackfilter:alpha(opacity=20)opacity:0.2cursor:movedisplay:none}
.big {float:leftwidth:400pxheight:400pxmargin:100pxoverflow: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实现单击图片放大图片的方法,涉及javascript操作图片的技巧与onclick事件的用法,需要的朋友可以参考下本文实例讲述了js实现单击图片放大图片的方法。分享给大家供大家参考。具体实现方法如下:
代码如下:
<html>
<title>单击图片即可放大图片</title>
<body>
点击图片预览效果。<br>
<img
src="/images/m01.jpg"
onclick="this.width+=50this.height+=50"
onclick="javascript:window.open(this.src)"
style="cursor:pointer"/>
<img
src="/images/m02.jpg"
onclick="this.style.zoom='2'"
onclick="javascript:window.open(this.src)"
style="cursor:pointer"/>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。