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

JavaScript015

JS图片放大扩展，按钮开关放大镜,第1张

<!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/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程序设计有所帮助。