javascript实现的放大镜效果代码实例:
放大镜效果在产品网站或者图片网站有广泛的应用,也就是当鼠标放在图片上的某个位置,能够显示此位置的放大效果,有着良好的用户体验,也让浏览者感受到网站的动态效果,下面就是一段代码实例,希望能给需要的朋友带来一定的帮助。
代码如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><head><title>javascript放大镜效果代码-蚂蚁部落</title><style type="text/css">html { color:#000; background:#fff;}body,div { padding:0; margin:0;}img { border:none;}.outer { width:200px; height:200px; position:relative; margin:20px auto;}.inner { width:50px; height:50px; background:#f55; position:absolute; opacity:0.5; filter:alpha(opacity=50); left:0; top:0; cursor:pointer;}.bigouter { width:320px; height:320px; position:relative; border:1px red solid; margin:20px auto; overflow:hidden;}.imgs { position:absolute;}.outer img { width:200px; height:200px;}</style><script type="text/javascript"> window.onload=function(){ var outer=document.getElementById("outer"); var inner=document.getElementById("inner"); var bigouter=document.getElementById("bigouter"); var imgs=document.getElementById("imgs"); var x,y,n=false; inner.onmousedown=down; document.onmousemove=move; document.onmouseup=up; function down(event) { var event=event||window.event; n=true; x=event.clientX-inner.offsetLeft; y=event.clientY-inner.offsetTop; } function move(event) { var event=event||window.event; if(n==true) { inner.style.left=event.clientX-x+"px"; inner.style.top=event.clientY-y+"px"; imgs.style.left=-3.5*parseInt(inner.style.left)+"px"; imgs.style.top=-3.5*parseInt(inner.style.top)+"px"; if(parseInt(inner.style.left)<0) { inner.style.left=0+"px"; } if(parseInt(inner.style.top)<0) { inner.style.top=0+"px"; } if(parseInt(inner.style.left)>outer.clientWidth-inner.clientWidth) { inner.style.left=outer.clientWidth-inner.clientWidth+"px"; } if(parseInt(inner.style.top)>outer.clientHeight-inner.clientHeight) { inner.style.top=outer.clientHeight-inner.clientHeight+"px"; } if(parseInt(imgs.style.left)>0) { imgs.style.left=0+"px"; } if(parseInt(imgs.style.top)>0) { imgs.style.top=0+"px"; } if(parseInt(imgs.style.left)<-3.5*(outer.clientWidth-inner.clientWidth)) { imgs.style.left=-3.5*parseInt(outer.clientWidth-inner.clientWidth)+"px"; } if(parseInt(imgs.style.top)<-3.5*(outer.clientHeight-inner.clientHeight)) { imgs.style.top=-3.5*parseInt(outer.clientHeight-inner.clientHeight)+"px"; } } } function up() { n=false; } }</script></head><body><div> <div class="outer" id="outer"> <img src='/images/loading.gif' data-original="mytest/JS/s.jpg" /> <div class="inner" id="inner"></div> </div> <div class="bigouter" id="bigouter"> <div class="imgs" id="imgs" > <img src='/images/loading.gif' data-original="mytest/JS/b.jpg" /> </div> </div></div></body></html>
以上代码实现了产品的放大镜效果,下面介绍一下实现过程:
一.实现原理:
关于放大镜效果可能对于初学者来说看起来有点深奥,其实非常的简单,就是由两张图片一张是大图一张是小图,当鼠标在小图中按下的时候可以拖动一个半透明的块,此块用于标识将要放大的区域。当拖动小块移动的时候,就会根据比例调整大图的left和top属性值以此显示大图的和小图对应的区域,于是就实现了放大镜效果,具体代码还是看下面注释。
二.代码注释:
1.window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。
2.var outer=document.getElementById("outer"),获取id属性值为outer的元素对象。
3.var inner=document.getElementById("inner"),获取id属性值为inner的元素对象。
4.var bigouter=document.getElementById("bigouter"),获取id属性值为bigouter的元素对象。
5.var imgs=document.getElementById("imgs"),获取id属性值为imgs的元素对象。
6.var x,y,n=false,x和y用来存储鼠标指针距离半透明div左边缘和上边的距离,n用来标识是否可以拖动。
7.inner.onmousedown=down,为对象注册onmousedown事件处理函数。
8.document.onmousemove=move,为对象注册onmousemove事件处理函数,之所以注册在document对象上,是为了方式鼠标滑出半透明div致使div拖动失效的现象,利用了事件冒泡原理。
9.document.onmouseup=up,注册onmouseup事件处理函数,同样利用了事件冒泡原理。
10.function down(event){},onmousedown事件处理函数,参数为事件对象。
11.var event=event||window.event,为了兼容各个主流浏览器。
12.n=true,将半透明div标识为可以拖动。
13.x=event.clientX-inner.offsetLeft,获取鼠标按下时,鼠标指针距离半透明div左边缘的距离。
14.y=event.clientY-inner.offsetTop,获取鼠标按下时,鼠标指针距离半透明div上边缘的距离。
15.function move(event){},onmousemove事件处理函数,参数为事件对象。
16.var event=event||window.event,为了兼容各个主流浏览器。
17.if(n==true),判断是否可以拖动。
18.inner.style.left=event.clientX-x+"px",设置半透明div的left属性值。
19.inner.style.top=event.clientY-y+"px",设置班头div的top属性值。
20.imgs.style.left=-3.5*parseInt(inner.style.left)+"px",设置大图所在div的left属性值,这样当拖动半透明div的时候就实现了放大镜效果,之所以乘以3.5是因为大图的尺寸是小图的3.5倍。
21.imgs.style.top=-3.5*parseInt(inner.style.top)+"px",和上面是同样的道理。
22.下面的代码基本都是将div的移动限制在相应的返回之内,具体可以参阅javascript如何指定元素的拖拽范围一章节。
三.相关阅读:
1.javascript如何注册事件处理函数一章节。
2.javascript如何动态设置div的样式一章节。
3.javascript如何获取元素的子节点和父节点一章节。
4.var ev=window.event||ev的作用是什么一章节。
5.JavaScript的parseInt()函数一章节。
6.clientWidth属性可以参阅scrollTop、offsetHeight和offsetTop等属性用法详解一章节。
7.关于事件冒泡可以参阅javascript事件冒泡简单介绍一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8413
更多内容可以参阅:http://www.softwhy.com/javascript/
原标题:javascript实现的放大镜效果代码实例
关键词:JavaScript